Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old March 19th, 2012, 09:02 AM
Authorized User
Points: 181, Level: 3
Points: 181, Level: 3 Points: 181, Level: 3 Points: 181, Level: 3
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Mar 2009
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Default reposition the image according to the div size

Dear all,

I need help for the below task.

There is one div element with the attribute width=900 and height=540, on that div has multiple images with positioned like right , left, bottom and top.

When i change the div width=1600 and height=900 dynamically automatically those image also to be positioned it accordingly.

Sample code:
==========
<div class="myclass" id="mydiv" style="width: 960px; height: 540px;">
<img alt="bird" src="bird-s.png" style="left: -62px; top: 85px; z-index: 11; position: absolute;">
<img alt="king" src="king-s.png" style="left: 356px; top: 432px; z-index: 12; position: absolute;">
<img alt="phone" src="phone-s.png" style="left: 866px; top: 196px; z-index: 13; position: absolute;">
<img alt="india" src="india-s.png" style="left: 420px; top: -54px; z-index: 14; position: absolute;">
</div>

Thanks in advance,


Thanks,
Thava
 
Old March 22nd, 2012, 06:30 AM
Authorized User
Points: 448, Level: 7
Points: 448, Level: 7 Points: 448, Level: 7 Points: 448, Level: 7
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2011
Posts: 86
Thanks: 1
Thanked 12 Times in 12 Posts
Post

Hi,

I have no clue yet how you are going to programmatically resize your div... , but the way to go is to use separate css classes.

Your html could look like this:
Code:
 
<div class="Size1" id="mydiv" >
   <img class="topleft" alt="bird" src="bird-s.png" >
   <img class="topright" alt="king" src="king-s.png" >
   <img class="bottomleft" alt="phone" src="phone-s.png" >
   <img class="bottomright" alt="india" src="india-s.png" >
</div>
Your css could look like this:
Code:
 
Size1 {
	border: solid 1px red;
	width: 960px;
	height: 540px;
}

.Size1 img {
	border: solid 1px red
}
.Size1 img.topleft {
	left: -62px;
	top: 85px;
	z-index: 11;
	position: absolute;
}
.Size1 img.topright {
	left: 356px;
	top: 432px;
	z-index: 12;
	position: absolute;
}
.Size1 img.bottomleft {
	left: 866px;
	top: 196px;
	z-index: 13;
	position: absolute;
}
.Size1 img.bottomright {
	left: 420px;
	top: -54px;
	z-index: 14;
	position: absolute;
}

.Size2	 {
	border: solid 1px green;
	width: 960px;
	height: 540px;
}
.Size2 img.topleft {
	left: 0px;
	top: 10px;
	z-index: 11;
	position: absolute;
}
.Size2 img.topright {
	left: 500px;
	top: 10px;
	z-index: 12;
	position: absolute;
}
.Size2 img.bottomleft {
	left: 0px;
	top: 500px;
	z-index: 13;
	position: absolute;
}
.Size2 img.bottomright {
	left: 500px;
	top: 500px;
	z-index: 14;
	position: absolute;
}
And your javascript could look like this:
Code:
 
function ResizeThem(){
 	if (document.getElementById("mydiv").className == "Size1")
	 	document.getElementById("mydiv").className = "Size2";
	else
		document.getElementById("mydiv").className = "Size1";
 }
I hope this helps, success !




Similar Threads
Thread Thread Starter Forum Replies Last Post
image cuts through div Adam H-W CSS Cascading Style Sheets 0 October 13th, 2007 04:10 PM
center text (only) in fixed size div, how to do it beetle_jaipur BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 April 16th, 2007 01:38 PM
problem with swapping image into a div wilfordbrimley Javascript How-To 1 April 8th, 2006 04:52 PM
Overflow scrollbars vs. div size in IE vs. Gecko mishagos BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 4 April 3rd, 2005 02:38 PM
Window Size and DIV location TSEROOGY Javascript 6 August 30th, 2004 10:37 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.