|
JavaScript - Why Can't I Change The Height Of This Div?
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> Similar TutorialsHey 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>
I'm developing a site for my wife's acupuncture practice (http://www.acupunctuurfengyun.be. Since I have two monitors (one wide screen, one square) attached to my computer I can verify how it will look in different resolutions. While doing so I came across a nasty thing: in some resolutions the content div is very small and not using all of the full browser window (left after the header section). Is it possible to make a change to the CSS min-height and max-height while the page is being loaded? I've looked into lots of samples but all depend on a click or mouse over event and didn't want to work with onload in the body tag. I've also thought about putting the stuff in the PHP part of my code but I am lost at this moment on how to do this. Could someone help me out here? I am trying to customize this scrollbar so that it will fit all screen resolutions and I was wondering how I could do this by somehow customizing the JavaScript files created by Nathan Faubion or if I could do this using other JavaScript variables (var widthPercentage) to change the pixels to percentages? Please let me know what you think. Thank you very much! One of the pages on the website I'm using the JavaScript on: http://www.clintshipley.com/about.html Code: JavaScript file jsScroller.js:
//Created by Nathan Faubion http://www.n-son.com/scripts/jsScrolling/
function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("scroller-content") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("scroller-content") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
};
JavaScript on HTML page:
<script type="text/javascript" src="Scripts/jsScroller.js"></script>
<script type="text/javascript" src="Scripts/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("scroller"), 550, 275);
scrollbar = new jsScrollbar (document.getElementById("scrollbar-content"), scroller, false);
}
</script>
Hi, I need to re-size a div to be 100% of the browser but taking into account the height of an existing header div. Currently it works but it doesn't factor the height of the above header div, and therefore scrolls off the page (the height of the header div) I need to manipulate ( subtract the height value of the header) in the javascript somehow. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function SetHeightOfDiv(){
var theDiv = document.getElementById('content');
theDiv.style.height = BrowserHeight()+"px";
}
function BrowserHeight() {
var theHeight;
if (window.innerHeight) {
theHeight = window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight = document.documentElement.clientHeight;
}
else if (document.body) {
theHeight = document.body.clientHeight;
}
return theHeight;
}
</script>
</head>
<body style="height:100%; background-color:blue; margin:0; padding:0; color:#ffffff; font-size:15px; text-align:center; font-family:monospace,arial"
onload="SetHeightOfDiv()">
<div id="wrapper" style="height:100%; width:900px; background-color:yellow; margin-left:auto; margin-right:auto; overflow:hidden">
<div id="header" style="margin-top:0px; height:130px; width:890px; margin-left:5px; background-color:red; position:fixed">
<p>The FIXED HEADER</p>
</div>
<div id="content" style="margin-top:132px; background-color:grey; width:890px; margin-left:5px">
<p>THE BODY - that extends below the browser window (possibly the height of the header)</p></br>
<p>So how do we manipulate the Javascript to 'Subtract' the height of the HEADER?</p></br>
<p style="text-align:left; padding-left:10px">
function SetHeightOfDiv(){ <br>
var theDiv = document.getElementById('content');<br>
theDiv.style.height = BrowserHeight()+"px";<br>
}<br>
</br>
function BrowserHeight() {<br>
var theHeight;<br>
if (window.innerHeight) {<br>
theHeight = window.innerHeight;<br>
}<br>
else if (document.documentElement && document.documentElement.clientHeight) {<br>
theHeight = document.documentElement.clientHeight;<br>
}<br>
else if (document.body) {<br>
theHeight = document.body.clientHeight;<br>
}<br>
return theHeight;<br>
}</p>
</div>
</div> <!--end of wrapper-->
</body>
</html>
Thanks http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? Hello, Current Live View: https://tornhq.com/AroundTheWorld/Lo...WorkingOn.html This content is going to be implemented into a form I am currently working on once completed. As you can see, not all of the countries have yet been broken down as some we're having difficulties doing so. Code: SList.getSelect = function (slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content
if (SList[slist][option]) {
// if option from the last Select, add text-content, else, set dropdown list
if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else {
var addata = '<option>- - -</option>';
for (var i = 0; i < SList[slist][option].length; i++) {
addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
}
// cases for each dropdown list
switch (slist) {
case 'slist2':
document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">' + addata + '</select>';
document.getElementById('slist3').innerHTML = '';
break;
case 'slist3':
document.getElementById('slist3').innerHTML = txtsl3 + ' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>';
break;
}
}
} else {
// empty the tags for select lists
if (slist == 'slist2') {
document.getElementById('slist2').innerHTML = '';
document.getElementById('slist3').innerHTML = '';
} else if (slist == 'slist3') {
document.getElementById('slist3').innerHTML = '';
}
}
}
I need to know how to edit the following, if there is a simple way to set the case for each one as they are not all split up into the same way, some are Districts, some states and whatnot so the new question varies. Or do I simply need to make another big list to do them all? Best Regards, Tim Reply With Quote 03-21-2013, 06:35 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Well, for starters, this is generally a really bad way to add <select>s and <option>s. Period. I would certainly toss out your entire getSelect() function and rewrite it. But I'm also not clear on what your question is. Are you asking *HOW* to implement the third level? I don't see any countries with any third level data, at this point. If that's what you are asking, one possible way: Code: SList.slist2 = {
...
"United Kingdom" :
{ "England" : ["Staffordshire", "Derby", ... ],
"Scotland" : ["Edinburgh", ... ],
"Wales" : [ ... ],
"Northern Ireland" : [ .... ]
},
...
};
I have to ask: Why would you name that Slist.slist2 instead of Slist.countries ?? Not that it really matters, but why not make code more self documenting? 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'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 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 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 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 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 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 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 ! 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&y=83&q=85&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&y=83&q=85&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&y=83&q=85&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 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 guys, was just wondering if there was a way to control the page height and width using js/jquery? I have a page that is: width: 980px height: 2500px I would like the page height to be set to around 900px with the viewable scrollbar and all other content not viewable underneath. Any help is appreciated Cheers, paffley 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 |
|||||||