Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts

    why does the flip not working

    Hello,

    For study purposes I copied this site (http://20thingsIlearned.com) to my own hosting.

    But on the orginal site the pages flip and on my hosting the flip does not work at all.

    Can anyone help me figure out why this happens and how to solve this ?

    Roelof

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    yes.

    maybe.

    but we would have to see your page first - no good just showing us the working version.

  • Users who have thanked xelawho for this post:

    roelof (07-01-2013)

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Sorry,

    I forgot to give you my url.
    My page can be found at : http://test.tamarawobben.nl

    Roelof

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    well I guess the thing that jumps out is that the original detects that I am using an HTML5 enabled browser whereas yours does not, and so I guess falls back to some B plan.

    that would be the first place I would look, anyway.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    One big difference: In the original, the URL in the address bar changes, but the page does *NOT* actually change.

    In your code, when the URL in the address bar changes, you load a new page into the browser.

    Again, that might be due to HTML 5 differences, as Xelawho pointed out.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Correct but what I find wierd is if I look both at IE latest or FF latest.
    On the orginal I do not see the message and on my copie I see the message.

    But as I said in the first post I do not have a clue why.

    When I use the chrome developers tools and then the java console I see no errors at all.

    With my site I see these messages :
    Code:
    Creating Application Cache with manifest http://test.tamarawobben.nl/nl-NL/cache.manifest?v=49 nl-NL.html:1
    Application Cache Checking event nl-NL.html:1
    Application Cache Error event: Manifest fetch failed (404) http://test.tamarawobben.nl/nl-NL/cache.manifest?v=49 nl-NL.html:1
    Failed to load resource: the server responded with a status of 404 (Not Found) http://test.tamarawobben.nl/www.20thingsilearned.com/css/images/illustrations.png
    Failed to load resource: the server responded with a status of 404 (Not Found) http://test.tamarawobben.nl/www.20thingsilearned.com/css/fonts/droidsans-bold-webfont.woff
    Failed to load resource: the server responded with a status of 404 (Not Found) http://test.tamarawobben.nl/www.20thingsilearned.com/css/fonts/droidsans-webfont.woff
    Failed to load resource: the server responded with a status of 404 (Not Found) http://test.tamarawobben.nl/www.20thingsilearned.com/css/fonts/droidsans-webfont.ttf
    Failed to load resource: the server responded with a status of 404 (Not Found)
    And on the orginal site I see this :
    Code:
    Creating Application Cache with manifest http://www.20thingsilearned.com/nl-NL/cache.manifest?v=49 nl-NL:1
    Application Cache Checking event nl-NL:1
    Application Cache Downloading event nl-NL:1
    Version on server is: 49 twentythings.min.js:16
    Getting articles from storage twentythings.min.js:16
    Application Cache Progress event (0 of 67) http://www.20thingsilearned.com/nl-NL/css/print.css?v=49 nl-NL:1
    Application Cache Error event: Resource fetch failed (-1) http://www.20thingsilearned.com/nl-NL/css/print.css?v=49 nl-NL:1
    Asset preloaded: /css/images/sprites.png?v=1 [1/9] twentythings.min.js:16
    Asset preloaded: /css/images/front-cover.jpg?v=1 [2/9] twentythings.min.js:16
    Asset preloaded: /css/images/right-page.jpg?v=1 [3/9] twentythings.min.js:16
    Asset preloaded: /css/images/repeat-x.png?v=1 [4/9] twentythings.min.js:16
    Asset preloaded: /css/images/left-page.jpg?v=1 [5/9] twentythings.min.js:16
    Asset preloaded: /css/images/right-page-paper.jpg?v=1 [6/9] twentythings.min.js:16
    Asset preloaded: /css/images/left-page-flipped.jpg?v=1 [7/9] twentythings.min.js:16
    Asset preloaded: /css/images/back-cover.jpg?v=1 [8/9] twentythings.min.js:16
    Asset preloaded: /css/images/back-cover-flipped.jpg?v=1 [9/9] twentythings.min.js:16
    TT.cache.onDownloadingHandler twentythings.min.js:16
    TT.cache.onProgressHandler twentythings.min.js:16
    TT.cache.onErrorHandler twentythings.min.js:16
    Roelof

  • #7
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hello,

    I think that the pages come that the orginal puts all the pages in layers and makes only the current one visible and the rest hidden.

    I have to figure out if that is chancing by javascript or that the people of 20things did that manual.

    Roelof

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    oh, yeah - that's the other thing. The original uses local storage (have a look in Chrome>Inspect Element>Resources>Local Storage):
    Code:
    {"articles":{"/foreword/1":"<section class=\"template-start-7 title-foreword page-1 globalPage-1\" style=\"z-index: 499; display: none;\"><div class=\"page\"><div class=\"page-title\"><h2>Foreword to 20 Things</h2></div><div class=\"image1\"><img src=\"\" data-src=\"/media/illustrations/cloud01.png\"></div>\n<div class=\"left\">\n\t<p class=\"drop-cap\">Many of us these days depend on the World Wide Web to bring the world’s information to our fingertips, and put us in touch with people and events across the globe instantaneously.</p>\n</div>\n<div class=\"right\">\n\t<p class=\"continuation\">These powerful online experiences are possible thanks to an open web that can be accessed by anyone through a web browser, on any Internet-connected device in the world.</p>\n</div></div></section>","/foreword/2":"<section class=\"template-inner-6 title-foreword page-2 globalPage-2\" style=\"z-index: 498; display: none;\"><div class=\"page\"><div class=\"left\">\n\t<p class=\"continuation\">But how do our browsers and the web actually work? How has the World Wide Web evolved into what we know and love today? And what do we need to know to navigate the web safely and efficiently?</p>\n\t<p>“20 Things I Learned About Browsers and the Web” is a short guide for anyone who’s curious about the basics of browsers and the web. Here’s what you’ll find here:</p>\n\t<p>First we’ll look at the Internet, the very backbone that allows the web to exist. We’ll also take a look at how the web is used today, through cloud computing and web apps.</p>\n</div>\n<div class=\"right\">\n\t<p>Then, we’ll introduce the building blocks of web pages like HTML and JavaScript, and review how their invention and evolution have changed the websites you visit every day. We’ll also take a look at the modern browser and how it helps users browse the web more safely and securely.</p>\n\t<p>Finally, we’ll look ahead to the exciting innovations in browsers and web technologies that we believe will give us all even faster and more immersive online experiences in the future.</p>\n</div></div></section>","/foreword/3":"<section class=\"template-inner-7 title-foreword page-3 globalPage-3\" style=\"z-index: 497; display: none;\"><div class=\"page\"><p>Life as citizens of the web can be liberating and empowering, but also deserves some self-education. Just as we’d want to know various basic facts as citizens of our physical neighborhoods -- water safety, key services, local businesses -- it’s increasingly important to understand a similar set of information about our online lives. That’s the spirit in which we wrote this guide. Many of the examples used to illustrate the features and functionality of the browser often refer back to Chrome, the open-source browser that we know well. We hope you find this guide as enjoyable to read as we did to create.</p>\n<p class=\"continuation\">Happy browsing!</p>\n<div class=\"spacer\"></div>\n<p class=\"continuation\"><em>The Google Chrome Team, with many thanks to Christoph Niemann for his illustrations</em></p>\n<p class=\"continuation\"><em>November 2010</em></p></div></section>","/what-is-the-internet/1":"<section class=\"template-start-7 title-what-is-the-internet page-1 globalPage-4\" style=\"z-index: 496; display: none;\"><div class=\"page\"><div class=\"page-title\"><h2>What is the Internet?</h2><h3>or, \"You Say Tomato, I Say TCP/IP\"</h3></div><div class=\"image1\"><img src=\"\" data-src=\"/media/illustrations/internet01.png\"></div>\n<div class=\"left\">\n\t<p class=\"drop-cap\">What is the Internet, exactly? To some of us, the Internet is where we stay in touch with friends, get the news, shop, and play games. To some others, the Internet can mean their local broadband providers, or the underground wires and fiber-optic cables that</p>\n</div>\n<div class=\"right\">\n\t<p class=\"continuation\">carry data back and forth across cities and oceans. Who is right?</p>\n\t<p>A helpful place to start is near the Very Beginning: 1974. That was the year that a few smart computer researchers invented something called the Internet Protocol Suite, or TCP/IP for</p>\n</div></div></section>","/what-is-the-internet/2":"<section class=\"template-inner-5 title-what-is-the-internet page-2 globalPage-5\" style=\"z-index: 495; display: none;\"><div class=\"page\"><div class=\"left\">\n\t<p class=\"continuation\">short. TCP/IP created a set of rules that allowed computers to “talk” to each other and send information back and forth.</p>\n\t<p>TCP/IP is somewhat like human communication: when we speak to each other, the rules of grammar provide structure to language and ensure that we can understand each other and exchange ideas. Similarly, TCP/IP provides the rules of communication that ensure interconnected devices understand each other so that they can send information back and forth. As that group of interconnected devices grew from one room to many rooms — and then to many buildings, and then to many cities and countries — the Internet was born.</p>\n</div>\n<div class=\"right\">\n\t<p>The early creators of the Internet discovered that data and information could be sent more efficiently when broken into smaller chunks, sent separately, and reassembled. Those chunks are called <strong>packets</strong>. So when you send an email across the Internet, your full email message is broken down into packets, sent to your recipient, and reassembled. The same thing happens when you watch a video on a website like YouTube: the video files are segmented into data packets that can be sent from multiple YouTube servers around the world and reassembled to form the video that you watch through your browser.</p>\n</div></div></section>","/what-is-the-internet/3":"<section class=\"template-inner-2 title-what-is-the-internet page-3 globalPage-6\" style=\"z-index: 494; display: none;\"><div class=\"page\"><div class=\"left\">\n\t<p>What about speed? If traffic on the Internet were akin to a stream of water, the Internet’s <strong>bandwidth</strong> is equivalent to the amount of water that flows through the stream per second. So when you hear engineers talking about bandwidth, what they’re really referring to is the amount of data that can be sent over your Internet connection per second. This is an indication of how fast your connection is. Faster connections are now possible with better physical infrastructure (such as fiber optic cables that can send information close to the speed of light), as well as better ways to encode the information onto the physical medium itself, even on older medium like copper wires.</p>\n\t<p>The Internet is a fascinating and highly technical system, and yet for most of us today, it’s a user-friendly world where we don’t even</p>\n</div>\n<div class=\"right\">\n\t<p class=\"continuation\"> think about the wires and equations involved. The Internet is also the backbone that allows the World Wide Web that we know and love to exist: with an Internet connection, we can access an open, ever-growing universe of interlinked web pages and applications. In fact, there are probably as many pages on the web today as there are neurons in your brain, as there are stars in the Milky Way!</p>\n\t<p>In the next two chapters, we’ll take a look at how the web is used today through cloud computing and web apps.</p>\n</div></div></section>","/cloud-computing/1":"<section class=\"template-start-5 title-cloud-computing page-1 globalPage-7\" style=\"z-index: 493; display: none;\"><div class=\"page\"><div class=\"page-title\"><h2>Cloud Computing</h2><h3>or, why it's ok for a truck to crush your laptop</h3></div><div class=\"left\">\n\t<p class=\"drop-cap\">Modern computing in the age of the Internet is quite a strange, remarkable thing. As you sit hunched over your laptop at home watching a YouTube video or using a search engine, you’re actually plugging into the collective power of thousands of computers that serve all this information to you from far-away rooms distributed around the world. It’s almost like having a massive supercomputer at your beck and call, thanks to the Internet.</p>\n\t<p>This phenomenon is what we typically refer to as cloud computing. We now read the</p>\n</div>\n<div class=\"right\">\n\t<div class=\"image1\"><img src=\"\" data-src=\"/media/illustrations/cloud03.png\"></div>\n\t<p class=\"continuation\">news, listen to music, shop, watch TV shows and store our files on the web. Some of us live in cities in which nearly every museum, bank, and government office has a website. The end result? We spend less time in lines or on the phone, as these websites allow us to do things like pay bills and make reservations. The movement of many of our daily tasks online enables us to live more fully in the real world.</p>\n</div></div></section>","/cloud-computing/2":"<section class=\"template-inner-5 title-cloud-computing page-2 globalPage-8\" style=\"z-index: 492; display: none;\"><div class=\"page\"><div class=\"left\">\n<p>Cloud computing offers other benefits as well. Not too long ago, many of us worried about losing our documents, photos and files if something bad happened to our computers, like a virus or a hardware malfunction. Today, our data is migrating beyond the boundaries of our personal computers. Instead, we’re moving our data online into “the cloud”. If you upload your photos, store critical files online and use a web-based email service like Gmail or Yahoo! Mail, an 18-wheel truck could run over your laptop and all your data would still safely reside on the web, accessible from any Internet-connected computer, anywhere in the world.</p>\n</div>\n<div class=\"right\">\n\t<div class=\"image1\"><img src=\"\" data-src=\"/media/illustrations/cloud02.png\"></div>\n</div></div></section>","/web-apps/1":"<section class=\"template-start-5 title-web-apps page-1 globalPage-9\" style=\"z-index: 491; display: none;\"><div class=\"page\"><div class=\"page-title\"><h2>Web Apps</h2><h3>or, \"Life, Liberty and the Pursuit of Appiness\"</h3></div><div class=\"left\">\n\t<div class=\"image1\">
    
    //... etc
    and references a manifest
    http://www.20thingsilearned.com/en-U....manifest?v=49

    whereas yours references a manifest that doesn't exist:
    http://test.tamarawobben.nl/nl-NL/cache.manifest?v=49

  • Users who have thanked xelawho for this post:

    roelof (07-01-2013)

  • #9
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks,

    Maybe a stupid question but I made a file called cache.manifest on that directory.
    But still file not found.

    Or schould the name be cache.manifest?v=19 ??

    Roelof

  • #10
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hello,

    I copied all the missing images and fonts to the right directory but now no layout and I see these messages:
    Code:
    Application Cache Checking event nl-NL.html:1
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/twentythings.min9c55.css?v=49  nl-NL.html:29
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/basic.css  nl-NL.html:31
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/print9c55.css?v=49  nl-NL.html:29
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/images/front-cover.jpg  nl-NL.html:44
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/images/back-cover.jpg  nl-NL.html:44
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/images/left-page.jpg  nl-NL.html:44
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/images/right-page.jpg  nl-NL.html:44
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/media/images/HTML5_Badge_32.png  nl-NL.html:44
    GET http://test.tamarawobben.nl/apis.google.com/js/plusone.js  nl-NL.html:44
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/js/thirdparty/jquery.1.4.2.min.js  nl-NL.html:44
    Uncaught ReferenceError: $ is not defined nl-NL.html:860
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/js/twentythings.locale.js  nl-NL.html:44
    GET http://www.google-analytics.com/ga.js  nl-NL.html:59
    Application Cache NoUpdate event
    Can someone help me to make this work.

    Roelof

    Edit 1: I did some test and it seems that the cache.manifest is too blame. When I delete them the layout is perfect.

    Edit 2: When I change the versionnumber to 50. Nothing changes. And on the chrome console I see that version 49 is still being used.
    Last edited by roelof; 07-02-2013 at 06:39 PM.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    here is a good resource about working with offline apps:
    http://diveintohtml5.info/offline.html

    notice under the section titled 'THE FINE ART OF DEBUGGING, A.K.A. "KILL ME! KILL ME NOW!"' this line:
    if even a single resource listed in your cache manifest file fails to download properly, the entire process of caching your offline web application will fail
    I'm now getting a cache application error that "http://test.tamarawobben.nl/nl-NL/media/illustrations/identity01.png?v=50" doesn't exist (which is true)...

  • Users who have thanked xelawho for this post:

    roelof (07-03-2013)

  • #12
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks,

    Enough to do the next days.

    Roelof

  • #13
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    One question :

    I see this error message: Uncaught ReferenceError: $ is not defined

    And it coming from this part
    Code:
    <script type="text/javascript">
    				$('img').each(function(){
    					if( $(this).attr('data-src') ){
    						$(this).attr( 'src', $(this).attr('data-src') );
    					}
            });
            
            TT.locale.initialize();
    			</script>
    How to solve this one ?

    Roelof

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I am not seeing that error (maybe clear the cache in your browser?), but what I am seeing is
    Uncaught ReferenceError: TT is not defined
    probably because the manifest still has not been downloaded properly

  • #15
    New Coder
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Oke,

    This looks well
    Code:
    Document was loaded from Application Cache with manifest http://test.tamarawobben.nl/www.20thingsilearned.com/nl-NL/cache.manifest?v=49 nl-NL.html:1
    Application Cache Checking event nl-NL.html:1
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/twentythings.min9c55.css?v=49  nl-NL.html:29
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/basic.css  nl-NL.html:31
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/print9c55.css?v=49  nl-NL.html:29
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/images/front-cover.jpg  nl-NL.html:44
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/images/back-cover.jpg  nl-NL.html:44
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/images/left-page.jpg  nl-NL.html:44
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/css/images/right-page.jpg  nl-NL.html:44
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/media/images/HTML5_Badge_32.png  nl-NL.html:44
    GET http://test.tamarawobben.nl/apis.google.com/js/plusone.js  nl-NL.html:44
    Uncaught ReferenceError: TT is not defined nl-NL.html:859
    GET http://test.tamarawobben.nl/www.20thingsilearned.com/js/thirdparty/jquery.1.4.2.min.js  nl-NL.html:44
    GET http://www.google-analytics.com/ga.js  nl-NL.html:59
    Application Cache NoUpdate event
    So I cannot see what can be the reason why the manifest is not downloaded properly. But still I cannot see the same text as the orginal.

    Schould I maybe rename cache.manifest to cache.manifest?v=49?

    Roelof

    Edit 1 : I changed the first script but even atfter clearing the application cache and several times F5 I still see the old scripts.
    Last edited by roelof; 07-03-2013 at 07:39 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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