JavaScript - Resize Object Within A Div

Ignore post (if mod, please delete)

Hello together!

I generate html code with jsp. In that jsp there a several framesets and frames. And yes i know, frames are not really up to date but it's an old program and i have to deal with it now. Anyway, in the top frameset i have an onload attribute like onload="load()".

In the function load i want to access the Element.prototype object. But unfortunately typeof Element gives me "undefined". So i looked a little deeper and found that window.toString() gives me "[object]" and not as expected "[object window]" so somehow my window doesn't know that its construcor is Window. window.construcor is "undefined" as well. And i don't have access to the Element object. I really don't know where the error could be. When the page is loaded and i access the same window over the console, then everything is right. But in my function a can't get access to the objects i need.

I also don't know what part of the code could be useful to post here, but maybe someone had a similar problem before? i should say that this problem only occurs in IE8. In IE9 it works perfectly.

Has anyone any idea??

I'm writing a program that involves a network of interconnected nodes (or simply objects in my example below). It depends on being able to access properties of an object's linked objects (a bit oddly worded, sorry)...

Problem is I'm not sure how to properly access those properties... see below please.

<script>

//This is an example of a problem im having in my own code...
//I want to access the name of the object within the links array wintin the object...

var objA = {name: "Object A", links: [objB, objC]};
var objB = {name: "Object B", links: [objC, objD, objE]};
var objC = {name: "Object C", links: [objB]};
var objD = {name: "Object D", links: [objE]};
var objE = {name: "Object E", links: [objD]};

//ex: I want to access the name of Object A's first link...
console.log(objA.links[0].name);

</script>

I'm hoping to get "Object B"...
But instead I get: TypeError: Result of expression 'objA.links[0]' [undefined] is not an object.
Is there another way around this? Any thoughts are appreciated.

Quote:
menu: function( a, b ) {
$( b ).observe( 'click', function( event ) {
event.stop();
if( $( a ).visible() ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
} else {
$( a ).show();
$( b ).addClassName( 'selected' );
document.observe( 'click', function( e ) {
if( e.target.id != a && e.target.id != b && !Element.descendantOf( e.target, $( a ) ) ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
}
});
}
});

$$( '#' + b + ' > a' ).each( function( element ) {
element.observe( 'click', function( event ) {
$( a ).hide();
$( b ).removeClassName( 'selected' );
document.stopObserving( 'click' );
});
});
}
This work's perfrect accept when i use it with others on the menu it leaves the other ones open, how do i get it to close the open one when i open a new menu..

Thanks.

Hello.

Is there any way to get the variable name of an object from inside the object?

E.g.

PHP Code:
function Bla(){

    this.write = function(){
    document.write(<objectname>);

    }

}

obj1 = new Bla();
obj1.write(); //Outputs obj1 



Here is my script:

PHP Code:
function myTimer(seconds, obj){
    this.seconds = seconds;
    this.obj = obj;
    this.startTimer = function(){
        if(this.seconds>0){
            this.seconds--;
            this.obj.innerHTML = this.seconds;
            this.timer = setTimeout("Timer.start()",1000);
        }
    }

}
Timer = new Timer(10, obj);
Timer.startTimer(); 



Now the problem is that the variable that contains the object must be named "Timer".

This way I cannot create new timer objects with different variable names

I have tried:
this.timer = setTimeout("this.start()",1000);
but it doesn't work.

That's why it would be good to detect the variable name and instead use something like this:
this.timer = setTimeout(varname+".start()",1000);

I would rather not have to pass the variable name through a parameter like this:
Timer1 = new Timer(10, obj, "Timer1");

Thanks in advance.

I am trying to troubleshoot my javascript function below.

Code:

<script type="text/javascript">
function txtboxfill(fillobj) {
    var rChar=String.fromCharCode(13);	
    var myVal = "To: " + this.form.to.value + rChar;
    myVal = myVal + "From: " + this.form.from.value + rChar;
    myVal = myVal + "Subj: " + this.form.subj.value + rChar + rChar;
    myVal = myVal + "Message: ";
    fillobj.value = myVal;
}
</script>

Then I have a text box input field with an Code:

<input type="text" id="tp" name="to" size="34" class="totext" onkeyup="txtboxfill(this.form.msg_area);">

and when I enter text in this field it gives me a 'this.form.to' is null or not an object and does not populate the textarea. BTW, msg_area is the id of my textarea.

Thank you.

This is the code my js script. I don't know how to edit the size in this script.
My pic is around 300x300. Please teach me thanks a lot.
Javascript
if ($(".brandbtnch").size()>0) {
$(".brandbtnch").click(function(){
var id=$(this).attr("data-id");
var data=$(".data"+id).html();
$(".brandbigpicl").html(data);
});
}

I just want to resize the pic edit with this script.
Thanks

I was wondering if anyone knows of a javascript which re-sizes an image live as the user changes their browser window like the front page of the Louis Vuitton website?

We would like it to fill the users browser window when they first load their page and then change size as they adjust their browser window.

If not in javascript then if anyone knows of a flash script that would good, just prefer to just javascript.

http://www.louisvuitton.com/

Thanks all

Chris

is it possible to make a textarea resize with text? so if e.g the text overflows, the text-area is automatically resized so that there's no scrolling? It needs to resize automatically as the user is typing (more or less), he/she shouldn;t click on any buttons to resize it

Hello everyone,

My problem consist in that I want to avoid re-loading the whole page, and only re-load the portion of the website that needs to be.
Similar to listed below;

website Banner (Solid)
Menu bar (Solid)
Div content (Changeable)

The main problem is that no matter what I do, I can't make the innerHTML cover the whole <div> </div>
It remains the same very small size, no matter what I put within the div. Far from its full size potential (plenty of space left).

Head script Code:
PHP 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">
<html>
<head>

<script type="text/javascript">
//<![CDATA[
// written by: Coothead
function updateObjectIframe(which){
    document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';
}
//]]>

</script>

<link rel="stylesheet" type="text/css" href="main_stylesheet.css" media="screen, projection" />

</head> 


Here is the html portion.
PHP Code:
<div id="one" style="background-color:#C0C0C0;position:relative;height:2000px;width:800px;float:left;"></div> 


Here is the link placed elswhere on the website (The solid menu bar)
PHP Code:
<li><a href="http://www.google.com" onclick="updateObjectIframe(this); return false;">Forums</a></li> 




It's not Google that I want to use, however a PHPBB forum.
But I found that the same problem occurs on no matter what I put in this innerhtml, the javascript gets limited to the same little box in the upper left corner of my div.
Can't change size, no matter what I tried to do.

I'm suspecting it has something to do with CSS, however I spended a whole night (and now day) trying to work this out, I really don't get much further.
I realize I should spend a couple of more nights when new to JS, however this kind script I consider like a foundation to a house, it's important before moving on with learning, maybe I'm wrong though.

Anyone who can help with this issue?
Would be very much appreciated, Thank you!

Hey everyone

My project was to create 4 buttons , 2 for div 1 and 2 for div 2.

The two divisions have overflow container so that the information
will never leak outside the div.

At the moment I have it so the style is 1x1 with opacity to 0 , then when visitors want to find information about a subject they press a button to move the div to a possition , opacity to 1 and the size is changed and the other button to return it.

Ive hit many problems and for my project I need to follow these lines, Ive found that I cant make javascript resize the same div more than once after a while.

could someone help me with this, Im trully baffled.

Hello Frnds,
I made a website, but when I resize my window the content get disturbed. How to stop it.
Please gimme suggestion ASAP

jQuery(window).resize(function(){
window.location.href=window.location.href;
});

this code was work all browsers but not work IE6. if anyone knows reply..

Hi,

I got some JavaScript code from the net to resize DIV's depending on the window-size. It works perfectly in FF, but it won't work in IE.

Code:

function Resize(){

  var winW = 630, winH = 460;
  
  if (parseInt(navigator.appVersion)>3) {
   if (navigator.appName=="Netscape") {
    winW = window.innerWidth-30;
    winH = window.innerHeight-200;
   }
   if (navigator.appName.indexOf("Microsoft")!=-1) {
    winW = document.body.offsetWidth-30;
    winH = document.body.offsetHeight-200;
   }
  }
  
  var topHeight = document.getElementById('top').offsetHeight;
  var setHeight = document.getElementById('settings').offsetHeight;
  var headersHeight = document.getElementById('headers').offsetHeight;
  var leftWidth = document.getElementById('left_column').offsetWidth;
  
  document.getElementById('container').style.width=winW+"px";
  document.getElementById('container').style.height=(winH-topHeight-setHeight)+"px";
  document.getElementById('headers').style.width=(winW-leftWidth)+"px";
  document.getElementById('data').style.width=(winW-leftWidth)+"px";
  document.getElementById('data').style.height=(winH-topHeight-setHeight-headersHeight)+"px";
  
}

I've been working on this for some days. I would appreciate any help I can get.

Erik

I'm centering a section of html between a header and a footer on window load and resize. However, there are some strange issues happening. I'll list a couple and the code below. I also have an external header.php, footer.php, and profile.css that are used, but I don't want to post unnecessary code. If needed, I'll be glad to post it up though.
Any help would be greatly appreciated. This one has got me stumped.

-If the window is reduced lower than full screen, as the window is lengthened the footer will jump over the last line of text in the middle content.

-If the window is loaded in a reduced window, then fullscreened, sometimes the middle content will not recenter.

HTML
Code:

<?php 
	session_start(); 
	require($_SERVER['DOCUMENT_ROOT']."/phpFiles/UserFunctions.php");
	

	//Checks for logout function
	if(isset($_GET['logout'])){
		logOut();
		header('Location: http://'.$_SERVER['HTTP_HOST']);
	}
	
	//Checks if user is not logged in
	if(isset($_SESSION['loggedIn']) != True){	
		header('Location: http://'.$_SERVER['HTTP_HOST']);
	}
	
	//Checks if user has saved new account information
	if(isset($_POST['accountSaved'])){
		accountChangeSave($_POST['firstName'],$_POST['middleName'],$_POST['lastName'],$_POST['agency'],$_POST['password'],$_POST['email']);
	}
	
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en" lang="en-US">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<link type="text/css" rel="stylesheet" href="css/profile.css"/>
<script type="text/javascript" src="jsFiles/main.js"></script>
<title>Home</title>
</head>
<body>
<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->
	<div id="wrap">
		<!-- Header Include -->
		<?php
			require($_SERVER['DOCUMENT_ROOT']."/phpFiles/header.php");
		?>
		<div id="main">
			<!-- Administrator profile -->
			<?php
			if($_SESSION['userType'] == 'admin' or $_SESSION['userType'] == 'superAdmin'){
			?>
				<div id="middleContent">
					<div id="welcomeText"> Welcome <?php echo($_SESSION['firstName']) ?></div>
					<div id="horizontalBorder"> <img src = "images/welcomeBorderHorizontal.png"/></div>
					<div id="linkImages">
						<a href="javascript:void(0)" onclick="setAccountValuesJS(); openLightBox('accountBoxContent');"> 
							<img id="leftLinkImage" src ="images/silhouette.png"/>
						</a>
						<img id="verticalBorder" src="images/welcomeBorderVertical.png"/>
						<a href="" id="rightLinkImage"><img src="images/groupSilhouette.png"/></a>
					</div>
					<div id="linkText">
						<div id="leftLinkText">My Account</div>
						<div id="rightLinkText">Manage Users</div>
					</div>
				</div>
				
			<!-- Basic user profile -->
			<?php
			}else{
			?>
				<div id="middleContent">
					<div id="welcomeText"> Welcome <?php echo($_SESSION['firstName']) ?></div>
					<div id="horizontalBorder"> <img src = "images/welcomeBorderHorizontal.png"/></div>
					<div id="linkImages">
						<a href="javascript:void(0)" onclick="setAccountValuesJS(); openLightBox('accountBoxContent');">
							<img id="leftLinkImage" src ="images/silhouette.png"/>
						</a>
						<img id="verticalBorder" src="images/welcomeBorderVertical.png"/>
						<a href="" id="rightLinkImage"><img src="images/briefcase.png"/></a>
					</div>
					<div id="linkText">
						<div id="leftLinkText">My Account</div>
						<div id="rightLinkText">Apps</div>
					</div>
				</div>
			<?php
			}
			?>
		</div>
	</div>
	<!-- Footer Include -->
	<?php
	require($_SERVER['DOCUMENT_ROOT']."/phpFiles/footer.php");
	?>
</body>

</html>

CSS
Code:

/*Site Wide*/
body {
margin: 0;
padding: 0;
color: #ffffff;
font-family: Gill Sans, sans-serif;
background-color: #F1F1F1;
height:100%;
}
html{
overflow:scroll;
height:100%;
}
img{
border-width:0px;
}
#wrap{
min-height:100%;
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
color: white;
text-decoration: none;
}
a:active {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline; 
color: white;
}

/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

/*Middle Content*/
#main{
overflow:auto;
padding-bottom: 170px;
}
#middleContent{
position:relative;
width:100%;
min-width:900px;
text-align:center;
}
#error{
size:x-large;
color:black;
font-weight:600;
}

/*header.php*/
#header{
background-image: url("../images/backgroundOrange.jpg");
position: relative;  
height: 100px;
width: 100%;
min-width:900px;
}
#navigationBar {
height:1em;
font-family: sans-serif;
position: absolute; 
font-size: 18px;
top:40px;
right:0%;
}
#topLogo {
position: absolute; 
top: 18px;
}

/*footer.php*/
#titleText{
font-size:large;
font-weight:2;
}
#footer{
position: relative;
background-color:#1F1F1F;
color:#ffffff;
min-width:900px;
margin-top:-170px;
height: 170px;
width:100%;
clear:both;
}
#bottomCopyright{
position:relative;
top:150px;
color: #BBBBBB;
font: sans-serif;
width:100%;
text-align:center;
font-size:small;
margin:auto;
}
#infoImageContainer{
position:relative;
float:left; 
margin-top:50px;
left: 20px;
}
#infoImage{
position:relative;
height:40px;
}
#infoTextContainer{
position:relative;
float:left; 
height:50%; 
margin-top:1.5em;
left: 40px;
}
#infoText{
font-size:small;
position:relative;
height:3em;
}
#contactImageContainer{
position:relative;
float:right; 
height:50%; 
margin-top:50px;
right: 170px;
}
#contactImage{
position: relative;
height:35px;
}
#contactTextContainer{
position:relative;
float:right; 
height:50%; 
margin-top:1.5em;
left: 40px;
}
#contactText{
font-size:small;
position:relative;
height:3em;
right:20px;
}
#networkLinksContainer{
position:relative;
margin:auto;
height:50%; 
margin-top:40px;
width:100%;
text-align:center;
}
#networkLinks{
position: relative;
height:54px;
margin:auto;
width:300px;
text-align:center;
top:40px;
}

/*Account Box*/
#fade{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	min-width:900px;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
#boxWrapper{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	margin:auto:
}
#accountBoxContent{
	display: none;
	position: relative;
	margin:auto;
	width: 250px;
	height: 430px;
	padding: 16px;
	background-color: #DBDBDB;
	z-index:1002;
	overflow: auto;
}
#editTitle{
height:50px;
font-size:X-Large;
font-weight:bold;
color:#282828;
vertical-align:inline-middle;
}
#editAccountLine{
color:#282828;
background-color:#282828;
height:1px;
}
#editAccountForm{
text-align:right;
position:relative;
top:30px;
color:#282828;
font-size:small;
font-weight:bold;
}
#editAccountLinks{
position:relative;
top:20px;
text-align:center;
}
#editAccountLinks > a{
color:#282828;
text-decoration:none;
}
#changeLinks{
position:relative;
bottom:3px;
font-size:x-small;
color:blue;
}
#formatText{
position:relative;
bottom:6px;
text-align:left;
font-style:italic;
}
#password{
background-color:#EBEBE4;
color:#545454;
}
#email{
background-color:#EBEBE4;
color:#545454;
}

Javascript
Code:

var firstName;
var middleName;
var lastName;
var agency;
var password;
var email;

//Vertically centers the middle content div
function setMiddleContentPos() {
	var window = document.body.scrollHeight;
	var header = document.getElementById('header').scrollHeight;
	var footer = document.getElementById('footer').scrollHeight;
	var middle = document.getElementById('middleContent').scrollHeight;
	var center = window - header - footer;
	var top;
	if(window-header-footer-middle > 50){
		top=center/2-middle/2;
		document.getElementById('middleContent').style.top=top+'px';
	}
}

//Vertically centers the middle content div
function setLightBoxPos(contentId) {
	var winHeight = getWindowHeight();
	if(winHeight > 0){
		var contentElement = document.getElementById(contentId);
		var contentHeight = contentElement.offsetHeight;
		if(winHeight - contentHeight > 0){
			//[Window height]/2 - [Lightbox Height]/2
			contentElement.style.top = (winHeight/2 - contentHeight/2)+'px';
		}
		else{
			contentElement.style.top = '0px';
		}
	}
}

//Open and Close Lightbox
function openLightBox(contentId){
	document.getElementById(contentId).style.display='block';
	document.getElementById('fade').style.display='block';
	setLightBoxPos(contentId);
}
function closeLightBox(contentId){
	document.getElementById(contentId).style.display='none';
	document.getElementById('fade').style.display='none';
}

//Set account values in js vars based on form
function setAccountValuesJS(){
	firstName = document.getElementById('firstName').value;
	middleName = document.getElementById('middleName').value;
	lastName = document.getElementById('lastName').value;
	agency = document.getElementById('agency').value;
	password = document.getElementById('password').value;
	email = document.getElementById('email').value;
}

//Set account values in form based on js vars
function setAccountValuesForm(){
	document.getElementById('firstName').value = firstName;
	document.getElementById('middleName').value = middleName;
	document.getElementById('lastName').value = lastName;
	document.getElementById('agency').value = agency;
	document.getElementById('password').value = password;
	document.getElementById('email').value = email;
}

//Checks a string for prescence of illegal characters
//Illegal Characters: > < ' " \ / &
function stringIsClean(string){
	if(string.indexOf('>') != -1 || string.indexOf('<') != -1 || string.indexOf("'") != -1 || string.indexOf('"') != -1 || 
		string.indexOf('&') != -1 || string.indexOf('/') != -1 || string.indexOf('\\') != -1){
		return true;
	}
	else{
		return false;
	}
}

//Saves account information
function saveAccount(){
	firstNameTest = document.getElementById('firstName').value;
	middleNameTest = document.getElementById('middleName').value;
	lastNameTest = document.getElementById('lastName').value;
	agencyTest = document.getElementById('agency').value;
	passwordTest = document.getElementById('password').value;
	emailTest = document.getElementById('email').value;
	if(stringIsClean(firstNameTest) || stringIsClean(middleNameTest) || stringIsClean(lastNameTest) || stringIsClean(agencyTest) || 
		stringIsClean(passwordTest) || stringIsClean(emailTest)){
		document.getElementById('formatText').style.color = 'red';
	}
	else{
		setAccountValuesJS();
		document.getElementById('accountSaved').value = 'true';
		document.getElementById('accountForm').submit();
	}
}
//Sets middle content to adjust on load and resize
window.onload = function() {
	setMiddleContentPos();
}
window.onresize = function() {
	//setLightBoxPos('accountBoxContent');
	setMiddleContentPos();
}