SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Help 360 degrees view

    Hello,
    I was looking at some demos with things you can do with HTML5, CSS3, and JavaScript together. One of the nice websites I stumbled upon was html5rocks.com
    and another was Apple's HTML5 Showcase

    My problem lies with trying to recreate a demo that exists here on apple's html5 site demos site. You can see the demos in action if you use safari or on any smart-phone mobile browser.
    The particular demo is their 360 view with the iPod Touches. I thought it would be nice to re-create it to implement it on my site, of course with different pictures.
    I tried and tired but I could not find anything on google about javascript and 360 degree views or coding it myself. I then thought about downloading the view source code for this page

    Upon doing so and linking the files correctly. I tried one version linking to the file's on apple's server and another version linking to files on my local computer after downloading them. And by files, I mean the CSS, JS, and images.

    However, when I ran it in safari or any other browser everything is displayed except the 360 version. You can have a look for yourself here
    This is the version linking to the files on their server.
    This is the version linking to the files on mine.

    So i was wondering if someone could possibly help me recreate the Demo and or help me code a 360 view using javascript and css as Apple says they did to make theirs

    Please reply if you have any questions, comments, concerns, or solutions I can provide the files and code if it helps. I believe i have linked to everything though in my post.

    Thanks in advance and Regards,
    Team 1504

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,139
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    I'm guessing this is a "Safari only" thing. When I went to the demo page I got a message saying I needed Safari (which I can't download to test it).

    Does your clone work OK in Safari at least?

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    hey mittineague,
    Apple had wanted it to be a safari only thing, but upon editing some of the scripts i got it working in all browsers.

    I do not know if it was a file permissions issue, but i believe it was a linking issue.

    So yes, i got it working and with any picutres too

    If you want, i could upload it to my server and post a link to that people who view this thread can have some reference.

    Basically, what I did though was that i downloaded my own copy of a js file they wrote called threeSixty.js
    This file then called upon whatever of 72 images the user was currently looking at based on the view.
    The problem was that the js file both online and the one i downloaded were using a relative URL to link to the pictures. Once i change the relative to an absolute by adding http://developers.apple.com/
    to "showcase/html5/threesixty/images/"
    it was able to display a 360 view of the ipod touches

    I later downloaded all 72 images so that the script would work offline and it did. And then replaced the images with 72 shots going 360 degrees around what i wanted to be viewed.


    Thanks and Regards,
    Team 1504

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I would avoid using anything which is vendor locked on anything within a production environment (for cross browser gracefully degrading code).

    But kudos for getting the example to work cross browser - does your examine gracefully degrade in CSS3 lacking browsers?

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Thank you Alex. Yes i did make it cross browser and thanks for the kudos
    However as it was orignially stated by Apple, it runs with CSS3 which safari 5 supports.
    When I made it cross browser I edited a JavaScript file that checked if safari was it browser. I then used CSS3 and if necessary some CSS2 to suffice in browsers that don't support the CSS3 elements.
    However I also do not believe that any of the 3d, border-radius, or mostly unsupported Css3 features.

    It does become slightly choppy but for now it is good enough. I have yet to try it in ie6 tho....
    However with ie9 coming up with apparently much more CSS support I am not so worried.

  6. #6
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Thank you Alex. Yes i did make it cross browser
    Actually, I guess i did not because it doesnt seem to work in IE

    I hope u guys didnt unsubscribe from this thread

    it seems to be a css3 positioning issue because it seems to be executing the javascript.


    Also i was wondering if there was a way one can detect if the browser is any ie under 9. Because apparently ie9 will have some css3 support.
    I know that one can append styling based on if it is IE,
    but i guess it could make more sense if i explain some things...

    What i am doing is having a div which contains the mainContent of the page. On my homepage, I will implement a javascript that is one of those Carousel script. It is this one, i bought it from code canyon.
    Sorry for not coding it myself.

    So the first slide will be an introduction and the second slide will be this 360 degree view.

    I know this may be something i have to ask the writer of the script, but is there a way that i can not have this script work if the browser is IE.
    Because the second slide is the content that wont work in IE.
    I guess i could somehow check if IE is the browser and if so disable or not link an essential js file to that script?
    That way it will be stuck on displaying the first slide, which is just an intro of text and links.

    I hope you guys can understand what I am talking about and I am willing to provide my code and further explanation if it helps.
    In other words, the things i wanted you to help me with would be,
    1.) fixing the script so it works in ie8 if possible ie7
    by using optional css2 if necessary if IE
    2.) How to sense the browser or if it is IE using JS or another method
    3.) And somehow sensing if Javascript is turned off

    Thanks in advance and Regards,
    Team 1504

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,139
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    AFAIK, "best practice" is to code everything in it's most "basic" form so that it looks and acts "OK" even without javascript or any CSS.

    Then, instead of browser detection, do feature support, and if it's there, add it. Otherwise they get the "OK" page.

  8. #8
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i have learned that in my experience in web-design that making you site without relying on js or unsupported css3.

    However, i was copying something apple developed for now.
    Maybe if i attach the code could you help me get it maybe working in IE?

    Also, i apologise if adding the questions on detecting browsers or if JS is on or off were too off topic for this thread

    Thanks in advance,
    Team 1504

  9. #9
    SitePoint Member
    Join Date
    Oct 2010
    Location
    Beech Grove, Indiana
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hate to pick up the thread late, but there are a few options out there in jquery that do what you are looking for.

    http://jquery.vostrel.cz/reel

    and

    http://www.ajax-zoom.com/examples/example15.php

    The first one is free and the second is a pay option.

  10. #10
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for pointing those out, I will take a look at them

  11. #11
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want, i could upload it to my server and post a link to that people who view this thread can have some reference.
    Hi Team 1504
    I am trying to figure how can i access the 360 code
    I will appreciate if you upload the code (after your changes) to a server and provide a link
    thanks in advance
    Beni


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •