JavaScript - Resize Region Areas

Hi ,

I need one javascript, which is going to change the color of the region in the particular image. For example one boy wearing the blue color t-shirts, i

want to change the blue color into red color by using the color code instead of chaging the image into new one.

Whether is this possible to do in javascript ?

Any help greatly appreciated.

Thanks,
Suresh.k

Hi there!

I hope I posted this question in the right place. I've been working on a Spry Master/Detail region using Dreamweaver CS4 for months now and I just can't get it to work right. I know very little about coding Javascript; I'm altering a template from a tutorial book. Here's my problem:

I want at least 2 master/detail regions on a single page, each nested in a spry tabbed panel, and each filtered by a non-destructive filter. I'm having all kinds of trouble getting this accomplished.I did some troubleshooting and have pinpointed exactly where things go wrong.

First, I thought that the problem might be that both of my tables were on the same page as the master/detail regions, so I put them on their own pages. No problems there. Then I built one master/detail region, with selectable filter menu, in a spry tabbed panel. No problem. Then I started all over again, and built each master/detail region stepwise following the instructions in the book. The 2 master/detail regions, 1 in each tab, are no problem. Applying the non-destructive filter is where things get tricky for me.

When I apply the non-destructive filters, all of the data from the first table disappears! The table in the 2nd tab still works perfectly.

My 2 spry datasets are named rs_CasteAbilities and rs_ProfAbilities. Here's the code for just creating the 2 spry data sets:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE]

No problems there. When I apply the nondestructive filter to the first spry dataset the first dataset filters just as it is supposed to and the second one does nothing, just as its supposed to. It looks like this:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
rs_CasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_CasteAbilities.gallery) {
return row;
}
return null;
}
rs_CasteAbilities.filter(chooseSet);
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE]

The problem is that when I apply the same filter to the 2nd spry dataset, the 2nd dataset filters, but the first dataset totally disappears when I view the page (firefox and safari)! I can post screenshots if needed. Here's the code I'm using:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
rs_CasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_CasteAbilities.gallery) {
return row;
}
return null;
}
rs_CasteAbilities.filter(chooseSet);
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities");
rs_ProfAbility.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_ProfAbility.gallery) {
return row;
}
return null;
}
rs_ProfAbility.filter(chooseSet); [CODE]

This problem has been stumping me for weeks and I'm getting to the point where I need to get this done. I hope that in my inexperience, I was able to communicate this problem articulately. Please somebody help!

Thanks so much to anyone who takes the time to help me out. The page itself, with nothing showing up in the first tab, can be viewed he

www.iotheatre.com/GoldenAgeAbilities.php

-Chris Blockus

Hi,

I coded the following JavaScript:
Code:

var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
document.body.appendChild(el);
el.setAttribute('height', 250);
el.setAttribute('width', 300);
el.setAttribute('frameborder', 0);
el.setAttribute('marginheight', 0);
el.setAttribute('marginwidth', 0)
el.setAttribute('src', 'http://example.com/?pub=1&format=image&size=300x250&url='+window.location);

And am putting it between <script type="text/javascript"> and </script> tags in the <body> section of my site. But, it only works in certain areas of the page. Can you guys think of any reason for this?

Let me know...
Thanks,
~Christian

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

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

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

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

Hello,
I have build a tree view forum, I have used the iframe tag to import it to my wordpress blog .
I have a script that determine the size of the iframe on load:

Code:

<script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;

//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
</script>

The problem with the script is that the forum(tree view forum) only shows topics. I have another script that displays the contents of any issue only while clicking (Void). In actual the contents of each issue is charging ahead - but the resize function of the Iframe script not see it.

How do I fix it, that the size of the Iframe will change automatically?

Thanks alot

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!

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

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 awesome coders! I am here in need of your help.
I have a site with a lot of videos, from different sources, in different sizes, only thing they have in common is <div id="player">.
Due do different sources, each video player is different. Some have embed code, some have object, some have iframe, some have both/all.
Is it possible to create a script that will: Change the height and width of object, embed, iframe within the div. Is there another way to resolve this issue without changing all video code manually.

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

Hi,

When I use the following code snippet in all major browsers (Chrome, FF, Safari, Opera, IE8), the window opens with a scroll bar and it is resizeable EXCEPT IN IE8. In IE8, there's no vertical scroll bar and it's not resizeable... any idea why not?

window.open('http://www.mysite.shtml?' + report_vars, '', "status=no, toolbar=no, location=yes, menubar=no, scrollbars=yes, alwaysRaised=yes, resizable=yes, width=" + window.outerWidth / 1.1 + ", height=" + window.outerHeight-0.1);

Thanks for reading!

~ kberry