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: CSS:

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>