DarkxPunk

I still can't rattle it. Any more clues...

I recommend the CSS solutions rather than doing it within the HTML. Personally I also like to specify by device and use php to determine what style sheet to use.

Can you post your code please? And push your image you can user margins, or make the box a relative or absolute position then add the values to the left and top.

The CSS for iPhones is fairly simple, idk about android though. I would also consider using php to address each type of device, but for the simple solution.First add in your header the following:

<meta name="viewport" content="width=device-width; minimum-scale=1.0; maximum-scale=1.0; user-scalable=0;"><meta name="apple-mobile-web-app-capable" content="yes"><link href="css/iOS.css" type="text/css" rel="stylesheet">

Then for your CSS: Note - For the iPhone you can simply use auto width if you wish.

/* iPad Portrait - Main container's width must be within 768px */@media screen and (orientation:portrait){	#wrap {	width: 724px;	}}/* iPad Landscape - Main container's width must be within 1024px */@media screen and (orientation:landscape){	#wrap {	width: 1000px;	}}/* iPhone Portrait - Main container's width must be within 320px */@media screen and (max-width: 320px){	#wrap {		width: 310px;	}}/* iPhone Landscape - Main container's width must be within 480px */@media screen and (min-width: 321px) and (max-width: 480px){	#wrap {		width: 470px;	}}

Now the CSS for android is similar to iPhone, but I honestly have no interest building for those inconsistent devices.

I agree

What?

Ofher than the size, it functions well. Message me on Skype and we can backandforth if you like. Otherwise I will post some CSS later.

Okay before if nessisary you just give me the solution, maybe try to explain.So I want to change it from onmouseover/out to be onclick. So I click once and it grows, I click again it shrinks.I attempted removing the mouse over event listeners and have it so onclick grow, and then change the onclick to ungrow so when I click again it shrinks, but for some reason it grows then shrinks right on click.So if you can explain how it works now and how I can maybe fix it myself. Thanks!

So did it work for you?

I recommend Ingolme's solution

Someone posted about this recently and honestly there is no real cross platform way to stretch an image. Check http://w3schools.invisionzone.com/index.php?showtopic=45873

You doing just iPhone/iPad? If so I could help, I am working on that too.

Solved thank you. Will keep playing and learning. Will update on any progress or any more questions. Thanks!

When it starts shrinking and I mouse over it, it refuses to regrow... I am still trying to wrap my head around how it works.

This is a perfect, yet long cross platform solution:

var d = document;function getDocumentHeight(){var mx = Math.maxreturn mx(mx(d.body.scrollHeight, d.documentElement.scrollHeight),mx(d.body.offsetHeight, d.documentElement.offsetHeight),mx(d.body.clientHeight, d.documentElement.clientHeight));} function getWindowHeight(){if (window.innerHeight){var mn = Math.min;return mn(d.body.clientHeight, d.documentElement.clientHeight, window.innerHeight)}else if (d.body.clientHeight || d.documentElement.clientHeight){var mn = Math.min;return mn(d.body.clientHeight, d.documentElement.clientHeight)}}if (getDocumentHeight() > getWindowHeight()){alert("Scrollable");}else{alert("Not Scrollable");}

(Actually I guess I am a lier, does not work in IE 7... Working on a quick fix will update code in a second)(Updated and Fixed)

Nope, but I think I found a solution, still working on the code, will post in a moment.

Is there any other ideas? Cause that method poses a problem for the iOS devices. Since I am testing this on the iPad, the screen.availHeight does not ignore the browser elements. It simply shows the full screen size.

I just spent re-testing. Works fine... What's your whole code?

I am learning how to do animations without jQuery. So I got the basics down, but I want something a bit more versatile. Say for example you mouse over and a box begins to grow, and when you mouse out the box shrinks back to its original state. Now if the animation is short you don't need to worry. But if its long then you get the two animations fighting till the first one completes. So I need a solution, how can I get a script that when I mouse out it detects that it needs to stop the animation, then begin the shrinking process. Thanks for any help, idea.

Well my layout is how it should be laid out. You add your extra stuff after. But good you got it working.

if (document.height > document.body.offsetHeight) {alert("Scrollable");}

Okay this is just a simple bare bone to help you fix it yourself.HTML:

<div id="topBox"></div><div id="containerBox"><div id="leftBox"></div><div id="centerBox"></div><div id="rightBox"></div></div><div id="bottomBox"></div>

CSS:

#topBox,#containerBox,#bottomBox {width: Xpx;margin: 0 auto 0;}#topBox,#containerBox,#leftBox,#centerBox,#rightBox,#bottomBox {overflow: hidden;}#topBox {height: Xpx;}#leftBox,#centerBox,#rightBox {float: left;}#bottomBox {height: Xpx;}

Thats very basic, you have really overcomplicated yours. Hope this helps.

Actually there is a little more too it. Skype me and I will send you some cleaner code. I just did that from my iPad. I can clean it up on my Mac. Up to you. Cleanup:HTML:

<!DOCTYPE html><html><head><title>AVA's Website</title><link rel="stylesheet" type="test/css" href="ava.css"></head><body><div id="header"><h1>AVA</h1><p>My challenge for the 2013 year is to record one original song or musical piece per month.</p></div><div id="tabs"><ul><li><a href="Challenge.html">This month's song</a></li><li><a href="Compositions.html">Compositions</a></li><li><a href="Covers.html">Covers</a></li><li><a href="hire.html">Hire AVA to sing</a></li></ul></div><div id="content"><div id="contentArea"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p></div><div id="followBox"><p>links to RSS feeds, etc., here</p></div></div><div id="footer"><p>Image credit: <a href='http://www.123rf.com/photo_15922339_metallic-metal-texture-background.html'>ngonhan / 123RF Stock Photo</a> | Image credit: <a href='http://www.123rf.com/photo_12205959_smooth-and-elegant-satin-isolated-on-a-white-background.html'>yuliufu / 123RF Stock Photo</a></p><p class="copy">©2012 Abigail Smith</p></div></body></html>

CSS:

* {margin: 0;border: 0;padding: 0;}body {background: #ededed;font-family: "Mona Lisa Solid ITC TT","Modern No. 20",Garamond,Gabriola,serif;font-size: 1.4em;}a {text-decoration: none;}p,#contentArea,#header {padding: 15px;}#header,#content,#footer {width: 900px;}#header,#tabs ul li a {text-align: center;}#header {margin: 22px auto;background: #999999;color: #666666;font-weight: bold;font-size: 1em;letter-spacing: 3px;}#header h1,#header p{margin: 0;padding: 0;}#header h1 {font-size: 3em;text-align: left;}#tabs ul,#content,#footer {margin: 0 auto 0;overflow: hidden;}#tabs ul {list-style: none;width: 902px;}#tabs ul li a {display: inline-block;margin-right: 5px;border: 1px solid #cccccc;border-bottom: 0;-moz-border-radius-topleft: 4px;border-top-left-radius: 4px;-moz-border-radius-topright: 4px;border-top-right-radius: 4px;width: 150px;height: 50px;float: left;font-style: italic;color: #000000;background: #f6f6f6;line-height: 2.4em;}#tabs ul li a:hover {text-decoration: underline;}#content {border: 1px solid #000000;background: url(http://studentaccess.emporia.edu/~asmith40/AVAwebsite/images/bg_image_med.jpg) no-repeat;}#followBox { }#footer {margin-top: 10px;}#footer p {padding: 5px;}#footer p.copy {text-align: right;}

I am still lost. Looks fine. Well not fine, but plan archived....,?

Solved:

<html><header><title>Blah</title><style>body {font-family: "Mona Lisa Solid ITC TT","Modern No. 20",Garamond,Gabriola,serif;font-size: 1.4em;}#Tabs {width: 903px;display: block;margin-right: auto;margin-left: auto;overflow: hidden;}#Tabs ul {padding: 0px;list-style-type: none;}#Tabs ul li a {float: left;margin-top: 0px;display: inline-block;margin-right: 5px;line-height: 1em;padding-left: 10px;background: #f6f6f6;border: 1px solid #ccc;border-bottom: 0px;-moz-border-radius-topleft: 4px;border-top-left-radius: 4px;-moz-border-radius-topright: 4px;border-top-right-radius: 4px;width: 150px;height: 50px;color: #000000;text-decoration: none;font-style: italic;}#Tabs ul li a:hover {text-decoration: underline;}#content {background-image: url(images/bg_image_med.jpg);background-repeat: none;border: 1px solid #000000;height: 500px;width: 900px;margin-left: auto;margin-right: auto;}#Content_Area {padding: 15px;overflow: hidden;width: 620px;height: 500px;}p { padding: 15px; }</style></header>	<body bgcolor="#EDEDED"><div id="header"><p><span id="title"> AVA </span><br> my challenge for the 2013 year is to record one original song or musical piece per month.</p></div><div id="Tabs"><ul><li><a href="Challenge.html">This month's song</a></li><li><a href="Compositions.html">Compositions </a></li><li><a href="Covers.html">Covers </a></li><li><a href="hire.html">Hire AVA to sing </a></li></ul></div><div id="content"><div id="Content_Area"><p>...the text...</p></div><div id="followbox">links to RSS feeds, etc., here</div></div></body></html>