Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
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
Reply With Quote
  #2 (permalink)  
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 !
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 07:05 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.