Discussion Forums  >  Uncategorized

Replies: 12    Views: 568

appvision
Aspiring developer
Profile
Posts: 139
Reg: Jan 20, 2011
location unknow...
1,390
02/27/11 02:03 PM (14 years ago)

Header Image for iPad

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.
 
Jackson
Lost but trying
Profile
Posts: 111
Reg: Dec 25, 2010
location unknow...
1,110
like
02/27/11 02:31 PM (14 years ago)
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.
 
Jackson
Lost but trying
Profile
Posts: 111
Reg: Dec 25, 2010
location unknow...
1,110
like
02/27/11 02:33 PM (14 years ago)
Hmm wouldn't show the code here (probably security safeguard) uploaded code as a .txt. file, download here: http://felixapplications.com/code.txt David
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
02/27/11 08:57 PM (14 years ago)
@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?
 
appvision
Aspiring developer
Profile
Posts: 139
Reg: Jan 20, 2011
location unknow...
1,390
like
02/28/11 04:45 AM (14 years ago)
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.
 
appvision
Aspiring developer
Profile
Posts: 139
Reg: Jan 20, 2011
location unknow...
1,390
like
02/28/11 08:24 AM (14 years ago)
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.
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
02/28/11 12:24 PM (14 years ago)
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 ;-)
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
02/28/11 02:52 PM (14 years ago)
Check your email. If you get stuck, re-post, I'll be back later. ;-)
 
minddog
I hate code!
Profile
Posts: 12
Reg: Jan 06, 2011
Northampton, NY
120
like
05/21/11 08:27 AM (14 years ago)
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?
 
erichopf
buzztouch Evangelist
Profile
Posts: 316
Reg: Mar 14, 2011
NY, NY
3,460
like
05/22/11 07:10 AM (14 years ago)
Minddog, Those sizes are just the screen width of the iPhone and iPad, respectively in Portrait orientation.
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
05/22/11 09:34 AM (14 years ago)
I like 300 wide x 150 tall for iPhones and 750 x 250 for iPads. Just a prefernce, your design may be different.
 
appvision
Aspiring developer
Profile
Posts: 139
Reg: Jan 20, 2011
location unknow...
1,390
like
05/24/11 06:13 AM (14 years ago)
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>
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
05/24/11 09:33 PM (14 years ago)
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
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.