I am using html docs for many pages. They have a image at the top of the page that is 320px for iPhone/iPod. I am using a 768 px image at the top of menu's for the iPad version. Can anyone point me to some JavaScript or other solution that would change the image shown if the browser window is greater than 320 so the larger image would be used for iPad? Note, I've disallowed landscape display. Thanks.

This is the best I could come up with, this code redirects the user if its NOT a iphone/ipod. Perhaps you can modify it to NOT show the 768 banner if its a iphone/ipod - else showing 320. Make sense? You would need to modify this line: ------------------------------------------------------------------- else {window.location = http://felixapplications.com/;} ------------------------------------------------------------------- for your purposes. Full code below: ------------------------------------------------------------------- CODE ------------------------------------------------------------------- Hope this helps a little :) David.

Hmm wouldn't show the code here (probably security safeguard) uploaded code as a .txt. file, download here: http://felixapplications.com/code.txt David

@nelsonlo This is a good question and your approach makes sense - use a different image for larger devices. Before lending any useful advice, we should probably try to get a better grip on your technical ability. a) Do you have a basic understadning of HTML or is somebody else helping you? b) If YES for a, are you comfortable using Javascript of is this a total mystery to you? c) Are you using Custom HTML (where the HTML is enteredin into the control panel) or are you using Custom URL and 'pointing' to a webpage on your server?

Hi David. I have about 15 years experience with HTML, still sometimes stumped and always open to good advice. Not a Javascript expert, but it's not a total mystery to me. I'm using Custom HTML docs added to the source code; I could use Custom URL pointing to a webpage on a server if needed. I'd like to be able serve a different header image when the page is viewed on the iPad. Thanks for your help.

I tried using Custom URL pointing to a webpage on a server, but it slows down the app. I prefer adding Custom HTML docs and images to the source code.

OK, good. So a few baby-steps in the right direction will help us figure out the best way. Lets do this: If you have a Custom HTML screen with an image already created, copy-n-paste the HTML into a plain text editor and email to info 'at' buzztouch.com as an attachment. I'll get a look at it and see what you're up to. Next, I'll write a simple little javascript function to detect the screen size and swap-images accordingly. If you can make sense of the example file I return to you, cool. If not, hollar ;-)

Check your email. If you get stuck, re-post, I'll be back later. ;-)

David, In 1.5 are there recommended sizes for header images small device vs large device? Are the sizes mentioned above 320X small and 768 large common/standard?

Minddog, Those sizes are just the screen width of the iPhone and iPad, respectively in Portrait orientation.

I like 300 wide x 150 tall for iPhones and 750 x 250 for iPads. Just a prefernce, your design may be different.

I have been using Javascript to use a different header image for iphone and ipad based on screen width and it works great. When I try to similar code to use different header image based on iphone orientation it doesn't switch the image. See below code that includes if(width < 321){ which calls one image if width is below 321 and a different image if not. Any ideas? <script type='text/javascript'> function updateHeaderImage(){ var width = screen.width; if(width < 321){ document.getElementById(imgHeader).src = header.png; document.getElementById(imgHeader).style.width = 320px; document.getElementById(imgHeader).style.height = 80px; }else{ document.getElementById(imgHeader).src = header480.png; document.getElementById(imgHeader).style.width = 480px; document.getElementById(imgHeader).style.height = 80px; } } </script>

Two ideas: a) Detect the screen orientation and set a different style sheet. This means you could apply a CSS class to an image tag and use two style sheets..one for each orientation. <link rel='stylesheet' media='all and (orientation:portrait)' href='portrait-style.css' /> <link rel='stylesheet' media='all and (orientation:landscape)' href='landscape-style.css' /> b) Capture the orientationchange event and from this, call another version of your updateHeaderImage method. Another version will be needed because the screen.width property will NOT CHANGE for portrait / landscape. It will always return the same thing. This means you new method will need to determine the screen.width to determine if it's iPad or iPhone. Then, it will need to determine the current orientation to then set the image size. Tons of good info about this here: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html