1. HTML 5 Advanced Features

HTML5 Application Cache by Eduonix Learning Solutions

video locked

About the Lecture

The lecture HTML5 Application Cache by Eduonix Learning Solutions is from the course HTML 5 Advanced Features. It contains the following chapters:

  • What is Application Cache?
  • Cache Manifest
  • Info page
  • Upload to Server
  • Web Developer Tools

Included Quiz Questions

  1. Internet Explorer
  2. Mozilla Firefox
  3. Chrome
  4. Safari
  1. Browse websites offline
  2. Pages load fast
  3. There is less load for the server
  4. None of these
  1. Manifest File
  2. Cache File
  3. Memory File
  4. Global File
  4. </li> </ol> </div> </div> </div> <div class="panel panel-default "> <div id="heading-15450" class="panel-heading button-heading quiz-lecture-link" role="tab" data-toggle="collapse" data-parent="#questions-accordion" data-target="#collapse-15450" aria-expanded="false" aria-controls="collapse-15450"> <p class="panel-title"> When an application is cached, it will remain until... </p> </div> <div id="collapse-15450" class="panel-collapse collapse out" role="tabpanel" aria-labelledby="heading-15450"> <div class="panel-body"> <ol class="panel-list list-lower-latin"> <li>all of the above</li> <li>it is cleared by the user</li> <li>it is modified</li> <li>the cache is updated</li> </ol> </div> </div> </div> </div> </div> </div> </div> <div class="container-fluid" data-order='{ "xs": { "col": "left", "order": 11 }, "default": { "col": "left", "order": 7 } }'> <div class="row"> <div class="col-xs-12"> <h3>These courses may be of interest to you</h3> </div> <div class="col-xs-6 col-sm-4 col-md-3"> <a class="tile-course" href="/it-courses/html5.course?us=l" rel="nofollow" > <div class="tile-course-box panel panel-default"> <div class="image-container"> <img alt="HTML5" class="img-responsive" src="https://assets-cdn1.lecturio.de/lecture_collection/image_medium/5201_1626855625.png" /><div class="play_icon"></div> </div> <div class="course-title"> HTML5 </div> <div class="course-text small text-muted"> Eduonix Learning Solutions </div> <div class="rating_container"> <span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star-half text-orange"></span> <span>(9)</span> </div> <div class="course-price"> <del class="text-muted"><span class="price"><span class="price-with-currency"><span class="currency-symbol i18n">€</span>6.66</span> per month</span></del> <span class="price"><span class="price-with-currency"><span class="currency-symbol i18n">€</span>2.99</span> per month</span> </div> <div class="discount-percent small"> You save 55 % </div> </div> </a> </div> <div class="col-xs-6 col-sm-4 col-md-3"> <a class="tile-course" href="/it-courses/html-5-advanced-features.course?us=l" rel="nofollow" > <div class="tile-course-box panel panel-default"> <div class="image-container"> <img alt="HTML 5 Advanced Features" class="img-responsive" src="https://assets-cdn1.lecturio.de/lecture_collection/image_medium/5206_1626856175.png" /><div class="play_icon"></div> </div> <div class="course-title"> HTML 5 Advanced Features </div> <div class="course-text small text-muted"> Eduonix Learning Solutions </div> <div class="rating_container"> <span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star text-orange"></span> <span>(1)</span> </div> <div class="course-price"> <del class="text-muted"><span class="price"><span class="price-with-currency"><span class="currency-symbol i18n">€</span>1.47</span> per month</span></del> <span class="price"><span class="price-with-currency"><span class="currency-symbol i18n">€</span>9.90</span></span> </div> <div class="discount-percent small"> You save 33 % </div> </div> </a> </div> </div> </div> <div id="eauthors-container" class="container-fluid" data-order='{ "xs": { "col": "left", "order": 9 }, "default": { "col": "left", "order": 5 } }'> <hr/> <div class="row"> <div class="col-xs-12"> <h3>Author <small>of lecture HTML5 Application Cache</small></h3> <div class="media eauthor"> <img alt=" Eduonix Learning Solutions" class="media-object img-circle pull-left" width="64" height="64" src="https://assets-cdn1.lecturio.de/profile/70734_1393324367_n.png" /> <div class="media-body"> <h3 class="h4 media-heading"> Eduonix Learning Solutions</h3> </div> </div> </div> </div> </div> <div id="comments-card" class="panel panel-default panel-card comments-card" data-order='{ "xs": { "col": "left", "order": 5 }, "default": { "col": "left", "order": 2 } }'> <div id="lecture_comments"></div> <div class="brick-controls panel-footer"> <a href="javascript:void(0);" class="show-all-bricks panel-action">show all</a> <a href="javascript:void(0);" class="show-part-bricks panel-action">Show less</a> </div> </div> <script type="text/javascript"> var inputLectureCommentsBootstrap = atob('L2VuL2lucHV0L2xpc3QtbGVjdHVyZS1jb21tZW50cy9odG1sNS1hcHBsaWNhdGlvbi1jYWNoZT9yc2s9bGVjdHVyZV9zaW1wbGlmaWVkJnJza0RhdGElNUJwbGF0Zm9ybSU1RD1zaG9wJnJza0RhdGElNUJzcF9udCU1RD1pdC1jb3Vyc2VzJmNhPWh0dHBzJTNBJTJGJTJGd3d3LmxlY3R1cmlvLmRlJTJGaXQtY291cnNlcyUyRmh0bWw1LWFwcGxpY2F0aW9uLWNhY2hlLmxlY3R1cmU='); // init translation object var translatorComments = new Lecturio.Translator($); translatorComments.addMessages({ "showMore": "Show more" }); </script> <!-- Ratings and Reviews --> <div class="container-fluid" data-order='{ "xs": { "col": "left", "order": 10 }, "default": { "col": "left", "order": 6 } }'> <hr/> <div class="row"> <div class="col-xs-12"> <h3>Customer reviews</h3> <span class="rating_container ratings_histogram"> <span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star text-orange"></span><span class="icon-rating icon-rating-star text-orange"></span> <span class="rating-number">(1)</span> </span> <br class="clearfix" /> <span class="text-muted clearfix"> 5,0 of 5 stars</span> <table class="reviews-histogram table"> <tr> <td class="dimension text-muted">5 Stars</td> <td> <div class="progress"> <div class="progress-bar progress-bar-orange" style="width: 500%"></div> </div> </td> <td class="count text-muted">5</td> </tr> <tr> <td class="dimension text-muted">4 Stars</td> <td> <div class="progress"> <div class="progress-bar progress-bar-orange" style="width: 0%"></div> </div> </td> <td class="count text-muted">0</td> </tr> <tr> <td class="dimension text-muted">3 Stars</td> <td> <div class="progress"> <div class="progress-bar progress-bar-orange" style="width: 0%"></div> </div> </td> <td class="count text-muted">0</td> </tr> <tr> <td class="dimension text-muted">2 Stars</td> <td> <div class="progress"> <div class="progress-bar progress-bar-orange" style="width: 0%"></div> </div> </td> <td class="count text-muted">0</td> </tr> <tr> <td class="dimension text-muted">1  Star</td> <td> <div class="progress"> <div class="progress-bar progress-bar-orange" style="width: 0%"></div> </div> </td> <td class="count text-muted">0</td> </tr> </table> <link rel="stylesheet" type="text/css" media="screen" href="/fonts/review-stars.css" /> </div> </div> <hr/> </div> <!-- Review-Modal start --> <div class="modal fade" id="review_modal" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <p class="modal-title" id="myModalLabel">Customer reviews</p> </div> <div class="modal-body" style="overflow:hidden;"> </div> </div> </div> </div> <script type="text/javascript"> var reviewsNotLoaded = true; $('#review_modal').on('show.bs.modal', function () { if (reviewsNotLoaded) { $('#review_modal .modal-body').load('/popup-reviews/lecture/10278', function () { var hint = ''; $("#review_modal .modal-body").append(hint); }); reviewsNotLoaded = false; } $('.modal .modal-body').css('overflow-y', 'scroll !important'); $('.modal .modal-body').css('min-height', $(window).height() * 0.3); $('.modal .modal-body').css('max-height', $(window).height() * 0.85); }); $(document).ready(function () { $("a.register-link, a.login-link").click(function (e) { e.preventDefault(); window.parent.$("body").trigger("start-registration", [$(this).attr("href")]); }); $("body").on("start-registration", function (e, currentUrl) { if (typeof lecturioJwplayer != "undefined") { currentUrl += "&pp=" + lecturioJwplayer.currentPlayerTime; } window.location.href = currentUrl; }); }); </script> <!-- Review-Modal end --> <!-- Ratings and Reviews end --> <!-- SEO Extracts --> <div class="container-fluid" data-order='{ "xs": { "col": "left", "order": 7 }, "default": { "col": "left", "order": 3 } }'> <hr/> <div class="row"> <div id="lecture-details" class="col-xs-12"> <h3>Excerpts from the accompanying material</h3> <p>... web application work offline without an Internet connection. All browsers aside from IE can use AppCache ...</p> <p>... on the document's html tag: ... Should be on all pages you want to cache ...</p> <p>... Series This is a very simple and minimal example: CACHE MANIFEST index.html style.css ...</p> <p>... text/cache-manifest; it’s really simple to do this with an .htaccess file: This will serve all ...</p> <p>... remain unless 1. The user clears it out 2. The manifest has ...</p> </div> </div> </div> <!-- SEO Extracts end --> <div style="z-index: 9999999" class="modal" id="explanation_modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <span class="modal-title"><span class="title-placeholder"></span></span> </div> <div class="modal-body"> <iframe src="about:blank" class="embed-responsive" style="width: 100%; height: 100%; border: none;"></iframe> </div> </div> </div> </div> <script type="text/javascript"> function resizeIframe() { var explanation_modal = $('#explanation_modal'), explanation_modal_frame = explanation_modal.find('iframe'); explanation_modal.find('.modal-dialog').width(332); explanation_modal_frame.width(302); explanation_modal_frame.height(170); } </script> <div id="left_col"></div> </div> <div class="col-xs-12 col-md-5 col-lg-4 action-box"> <div class="sticky-container" id="right_col"> <div class="panel panel-default panel-card panel-cta-card" data-order='{ "xs": { "col": "left", "order": 2 }, "default": { "col": "right", "order": 1 } }'> <a id="cta-lecture" class="btn btn-lg btn-success btn-block btn-login lecture-cta text-uppercase lecture-available" href="/it-courses/html-5-advanced-features.course">to course</a> <!--<hr />--> <div class="choice-delimiter text-muted"> <div class="line-background text-center"> <span>or</span> </div> </div> <a class="btn btn-buy btn-block buffer-top-20-md btn-default" id="checkout-btn" rel="nofollow" href="https://www.lecturio.de/en/payment/buy/abo/lecture/html5-application-cache">Unlock lecture <span class="price"><span class="price-with-currency"><span class="currency-symbol i18n">€</span>4.90</span></span></a><div class="foreign-currency"> <div class=""> <span class="price"><span class="price-with-currency"><span class="currency-symbol i18n">USD</span>5.23</span></span> </div> <div class=""> <span class="price"><span class="price-with-currency"><span class="currency-symbol i18n">GBP</span>4.23</span></span> </div> </div> <div class="text-center trustedshops-container"> <a href="https://www.trustedshops.de/bewertung/info_X9B6ACED00D6B58B0C1B69F7C1E4A84A2.html" class="trustedshops-logo" target="_blank"></a>   <a href="javascript:void(0);" data-toggle="modal" data-target="#popup-geld-zuruck-garantie" class="trustedshops-guarantee-en" target="_blank"></a>   </div> </div> </div> </div> <script id="lecture-nav-buttons-template" type="text/x-handlebars-template"> <div id="lecture-nav-buttons" class="text-center hidden"> <div class="js-lecture-link repeat-button"> <span class="glyphicon glyphicon-repeat"></span> </div> <div class="lecture-nav-buttons-container"> {{#if hasOpenQuestions}} <p class="lecture-completion-text">Lecture almost completed</p> <p class="quiz-questions-remaining-text">Answer all remaining quiz questions now</p> {{else}} <p class="lecture-completion-text">Lecture completed</p> {{/if}} <div class="buttons-container"> {{#if hasOpenQuestions}} {{#if isMedicalFlatrate}} {{#if hasNextLecture}} <a class="btn btn-default btn-lg js-quiz-resume">To quiz</a> {{else}} <a class="btn btn-success btn-lg js-quiz-resume">To quiz</a> {{/if}} {{else}} <a class="btn btn-success btn-lg js-quiz-resume">To quiz</a> {{/if}} {{/if}} {{#if hasNextLecture}} {{#if isMedicalFlatrate}} <a class="btn btn-default btn-lg js-next-lecture"> Next Lecture <span class="autostart-timing-prep"> in</span> <span class="js-autostart-timing autostart-timing"></span> </a> {{else}} {{#if hasOpenQuestions}} <a class="btn btn-default btn-lg js-next-lecture"> Next Lecture <span class="autostart-timing-prep"> in</span> <span class="js-autostart-timing autostart-timing"></span> </a> {{else}} <a class="btn btn-success btn-lg js-next-lecture"> Next Lecture <span class="autostart-timing-prep"> in</span> <span class="js-autostart-timing autostart-timing"></span> </a> {{/if}} {{/if}} {{else}} {{#if isNotScorm}} {{#if hasOpenQuestions}} <a class="btn btn-default btn-lg js-course-overview" href="/it-courses/html-5-advanced-features.course"> Course overview </a> {{else}} <a class="btn btn-success btn-lg js-course-overview" href="/it-courses/html-5-advanced-features.course"> Course overview </a> {{/if}} {{/if}} {{/if}} </div> </div> </div> </script> <script id="video-feedback-template" type="text/x-handlebars-template"> <div id="ticket-submit" class="panel-section ticket-form-container no-top-border hidden"> <form id="ticket-form" class="js-submit-form" action="post"> <label for="ticket-text">What's the issue?</label> <textarea name="ticket-text" class="gray-border" cols="50" rows="5" placeholder="Example: At minute 3:32 the lecturer says microliters but the slide shows milliliters" required></textarea> <div class="error-message hidden"> <span>Please provide some details about the issue</span> </div> <input class="btn btn-lg btn-success" type="button" name="submit" value="Send" /> </form> <div class="successful-ticket-submit hidden"> <div>Thank you for submitting your report.</div> <div> <a class="js-new-ticket-link new-ticket-link" href="javascript:void(0);">Did you find another mistake?</a> </div> </div> </div> </script> <script type="text/javascript"> $(document).ready(function () { var domOrder = new Lecturio.Dom.Order.Resolution({ "cols": { "left": $("#left_col"), "right": $("#right_col") }, "elements": $('[data-order]') }); domOrder.order($(window).width()); $(window).resize(function () { domOrder.order($(window).width()); }); var hasQuiz = '5' || 0; var quizCollection = null; var quizApp = quizApp || null; if(hasQuiz > 0 && quizApp != null) { quizCollection = quizApp.collection; } function initLectureScreens() { var lectureScreens = new Lecturio.LectureScreens( quizCollection, new Lecturio.Templates(Handlebars), lecturioJwplayer, false, false, new Lecturio.Timers.SecondsCountdown() ); var isPlayerComplete = false; $(document).on("LecturioPlayer.complete", function () { isPlayerComplete = true; lectureScreens.setHasOpenedQuestions(); lectureScreens.generateScreenFlow(); }); $(document).on("quiz.overview.closed", function () { $("#lecture-nav-buttons").remove(); if(isPlayerComplete === true) { lectureScreens.setHasOpenedQuestions(); lectureScreens.generateScreenFlow(); } }); } function showLecturesBar () { var hasPlayerLecturesBar = $('#lecture-list-button').length; if (hasPlayerLecturesBar >= 1){ var iconDown = '<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"> </span>'; var iconUp = '<span class="glyphicon glyphicon-triangle-top hidden" aria-hidden="true"> </span>'; var lecturesList = $('.lecture-list'); var lecturesListButton = $('#lecture-list-button'); var lecturesListButtonIcons = $('#lecture-list-button > span:nth-child(2)'); lecturesList.removeClass('icon').append(iconDown).append(iconUp); lecturesListButtonIcons.removeClass('hidden-xs').css("padding-left", "4px"); lecturesListButton.removeClass('col-xs-12'); $('#right_col').css('margin-top','32px'); //Adjust open behaviour lecturesListButton.on('click',function(){ $('.lecture-list span.glyphicon:nth-child(2)').toggleClass('hidden'); $('.lecture-list span.glyphicon:nth-child(1)').toggleClass('hidden'); }); } } // Video feedback feature var showFeedbackCard = ''; if (showFeedbackCard == true) { var commentsCard = $('#comments-card'); var feedbackTemplate = Handlebars.compile($('#video-feedback-template').html()); var feedbackHtml = feedbackTemplate(); $('#comments_container .panel-heading').css('display', 'none'); commentsCard.append(feedbackHtml); $('#comments-card .tabs-container').addClass('top-margin'); commentsCard.on('click', '.js-report-mistake', function () { $(this).addClass('active'); $('.js-lecture-questions').removeClass('active'); $('#comments_list_container').addClass('hidden'); $('.add-comment').addClass('hidden'); $('#ticket-submit').removeClass('hidden'); $('#comments-card .panel-footer').addClass('hidden'); $("#comments-card .close_new_comment_form").click(); }); commentsCard.on('click', '.js-lecture-questions', function () { $(this).addClass('active'); $('.js-report-mistake').removeClass('active'); $('#comments_list_container').removeClass('hidden'); $('.add-comment').removeClass('hidden'); $('#ticket-submit').addClass('hidden'); $('#comments-card .panel-footer').removeClass('hidden'); }); commentsCard.on('click', '.js-new-ticket-link', function () { $('#ticket-form textarea').val(''); $('.successful-ticket-submit').addClass('hidden'); $('.js-submit-form').removeClass('hidden'); }); commetsCardToggles(); $("#ticket-form").on('click', '.btn-success', function () { // Google tag manager var gtmDataLayer = dataLayer || []; gtmDataLayer.push({ "event": "trigger", "eventCategory": "QA Feedback", "eventAction": "report_form_video", "eventValue": "1" }); if ($('#ticket-form textarea').val().trim() != '') { $('#ticket-form textarea').removeClass('red-border').addClass('gray-border'); $('.successful-ticket-submit').removeClass('hidden'); $('.js-submit-form').addClass('hidden'); $('#ticket-form .error-message').addClass('hidden'); var position = (typeof lecturioJwplayer != "undefined") ? lecturioJwplayer.currentPlayerTime : 0; var ticket = { "url": window.location.href, "tag": "report_form_video", "position": position, "content": $("#ticket-form textarea").val() }; $.ajax({ type: "POST", url: "/api/en/latest/html5/zendesk/tickets.json", data: JSON.stringify(ticket), contentType: "application/json; charset=utf-8", success: function (data) { $('.successful-ticket-submit').removeClass('hidden'); $('.js-submit-form').addClass('hidden'); }, error: function (data, status) { } }); } else { $('#ticket-form .error-message').removeClass('hidden'); $('#ticket-form textarea').removeClass('gray-border').addClass('red-border'); } }); } }); </script> <script type="text/javascript"> /* <![CDATA[ */ $(window).on('load', function () { // init sticky menu $(".action-box .sticky-container").on("affix.bs.affix", function () { $(".action-box .sticky-container").outerWidth($(".action-box").outerWidth() - 30); }); $(".action-box .sticky-container").affix({ "offset": { "top": function () { this.top = $(".action-box").offset().top - 30; return this.top; }, "bottom": function () { this.bottom = $(".footer").outerHeight(true); return this.bottom; } } }); $(window).on("resize", function () { $(".action-box .sticky-container").trigger("affix.bs.affix"); }); }); /* ]]> */ </script> </div> </div> </div> <script type="text/javascript"> /* <![CDATA[ */ globalVars.pageEnvironment = "shop"; /* ]]> */ </script> <!-- content: end --> <!-- footer tabs: begin --> <!-- footer tabs: end --> <!-- footer: begin --> <div class="footer"> <div class="footer-bg"> <div class="container footer-conteiner"> <div class="row"> <div class="col-sm-12 footer-top" id="footer"> <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12 footer-group"> <div class="group-title">Lecturio</div> <ul> <li><a href="/en/elearning/more-info/about-us">About us</a></li> <li><a href="https://www.lecturio.com/press/">Press</a></li> <li><a href="/en/elearning/more-info/jobs">Job Offers</a></li> <li><a target="_blank" href="https://www.lecturio.com/magazine/">Medical Library</a></li> </ul> </div> <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12 footer-group"> <div class="group-title">Courses</div> <ul> <li><a href="/en/business-career-courses">Business & Career</a></li> <li><a href="/en/finance-economics-courses">Finance & Economics</a></li> <li><a href="/en/it-courses">Software</a></li> </ul> </div> <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12 footer-group"> <div class="group-title">B2B</div> <ul> <li><a target="_blank" href="/organisations">for Organisations</a></li> <li><a href="/en/elearning/b2b/for-content-providers">for Content Providers</a></li> <li><a href="/en/elearning/more-info/affiliate">for Website Owners</a></li> </ul> </div> <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12 footer-group"> <div class="group-title">Support</div> <ul> <li><a target="_blank" href="/en/elearning/more-info/contact">Help</a></li> <li><a href="https://lecturio.zendesk.com/hc/en-us">Contact</a></li> <li><a target="_blank" href="/en/elearning/lecturio-mobil">Lecturio App</a></li> </ul> </div> <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 social-media pull-left-sm"> <a href="https://www.youtube.com/channel/UCbYmF43dpGHz8gi2ugiXr0Q" class="youtube_icon" target="_blank"></a> <a href="https://www.facebook.com/lecturio.medical.education.videos" class="facebook_icon" target="_blank"></a> <a href="https://www.instagram.com/lecturio_medical_videos" class="instagram_icon" target="_blank"></a> <a href="https://twitter.com/lecturiomedical" class="twitter_icon" target="_blank"></a> <div class="appstores"> <a href="https://itunes.apple.com/app/lecturio-e-learning/id667474925?mt=8" target="_blank" class="link-block w-inline-block"> <img src="https://assets-cdn2.lecturio.de/b2b-hp-redesign/images/badge-download-on-the-app-store-2.svg" width="110" alt=""> </a> <a href="https://play.google.com/store/apps/details?id=de.lecturio.android" target="_blank" class="link-block w-inline-block"> <img src="https://assets-cdn2.lecturio.de/b2b-hp-redesign/images/google-play-badge1x.png" width="122" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="footer-bottom-bg"> <div class="container footer-bottom-conteiner"> <div class="row"> <div class="col-sm-12 footer-bottom"> <p> © 2024 Lecturio GmbH. All rights reserved. </p> <ul> <li><a href="/en/elearning/legal/dataprotection">Data Privacy</a></li> <li><a href="/en/elearning/legal/termsofuse">Terms and Conditions</a></li> <li><a href="/en/elearning/legal/cancelationpolicy">Revocation</a></li> <li><a href="/en/elearning/legal/copyright">Legal Information</a></li> <li class="dropup"> <a href="#" class="dropdown-toggle" id="dropup-lng" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-globe"></span> English <span class="caret"></span> </a> <ul class="dropdown-menu dropup-lng" aria-labelledby="dropup-lng"> <li><a href="/change/language/de">Deutsch</a></li> <li><a href="/change/language/en">English</a></li> </ul> </li> </ul> </div> </div> </div> </div> </div> <!-- footer: end --> <div class="modal fade" id="popup-geld-zuruck-garantie" tabindex="-2"> <div class="modal-dialog modal-sm-fixed modal-login"> <div class="modal-content"> <div class="modal-body"> <!-- SA popup-geld-zuruck-garantie start --> <p style="text-align:center;"><img src="https://d24tigbl4jyjl7.cloudfront.net/images/icons/en/money-back-guarantee-icon.png" width="95" height="86" alt="Money-Back Guarantee" /></p> <p>Top Trainers, Top Content, best e-learning experience ever. We are conviced of that - 100%. That´s why we offer a 100% Money-Back Guarantee. You are not satisfied at all? Please drop us some lines. Up to 5 days within your purchase we refund the complete price you paid - no ifs and buts.</p> <!-- SA popup-geld-zuruck-garantie end --> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $.ajaxSetup({ xhrFields: { withCredentials: true } }); // fetch user data TODO api call to api.lecturio.com var user = new Lecturio.UserModel({}, { "url": "/api/en/latest/html5/user.json" }); user.fetch({"success": function (model) { $.ajaxSetup({ xhrFields: { withCredentials: false } }); $(document).trigger("user.data.fetched", model); var event = document.createEvent("CustomEvent"); event.initCustomEvent("user.data.fetched", true, true, model.attributes); window.dispatchEvent(event); }}); }); </script> <div id="last_cart_abandonment_product_wrapper" class="fade in hide"> <div class="alert-dialog"> <div id="last_cart_abandonment_product_container" class="modal-content"> <button type="button" class="close" id="close-alert"><span aria-hidden="true">×</span></button> <div id="last_cart_abandonment_title" class="modal-header"> You have one <span id="last_cart_abandonment_product_type"></span> in your basket. </div> <div id="last_cart_abandonment_product" class="alert-body"> <div id="last_cart_abandonment_product_left_container" class="pull-left"></div> <div id="last_cart_abandonment_product_right"> <div id="last_cart_abandonment_product_title"></div> <div id="last_cart_abandonment_product_duration" class="last_cart_abandonment_product_row checked_green_bullet">Direct contact to top experts</div> <div id="last_cart_abandonment_product_lkf_count" class="last_cart_abandonment_product_row checked_green_bullet">Mobile availability</div> <div class="last_cart_abandonment_product_row checked_green_bullet">100% Money-Back Guarantee</div> </div> <div class="clr clearfix"></div> </div> <div id="last_cart_abandonment_product_buttons"> <a id="last_cart_abandonment_product_button_close" class="flex_btn btn btn-default" rel="nofollow" href="javascript: void(0);"><span class="">Delete completely</span></a> <a id="last_cart_abandonment_product_button_later" class="flex_btn btn btn-default" rel="nofollow" href="javascript: void(0);"><span class="">Postpone</span></a> <a id="last_cart_abandonment_product_button_buy" class="flex_btn green_cta btn btn-success" rel="nofollow" href="#"><span class="">Go to basket</span></a> <div class="clr clearfix"></div> </div> </div> </div> </div> <script type="text/javascript"> function hideCartAbandonmentPopupForCurrentSession() { $.post(atob("L2VuL2hpZGUtY2FydC1hYmFuZG9ubWVudC1wb3B1cC1mb3ItY3VycmVudC1zZXNzaW9u")); } $(document).ready(function () { // Check if distractor was closed before or page is a payment funnel page. var shoppingCartProduct = $.cookie('shopping_cart_product'); if (shoppingCartProduct !== null) { shoppingCartProduct = $.parseJSON(shoppingCartProduct); if (typeof shoppingCartProduct.version !== "undefined") { if (shoppingCartProduct.version == '2') { $('#last_cart_abandonment_product_title').html(shoppingCartProduct.title); var imageRegExMatches = shoppingCartProduct.image_url.match(/:\/\/(.[^/]+)/); if (imageRegExMatches !== null && imageRegExMatches.length >= 2) { var imgDomain = imageRegExMatches[1]; shoppingCartProduct.image_url = shoppingCartProduct.image_url.replace('http:\/\/' + imgDomain, 'https://assets-cdn1.lecturio.de'); $('#last_cart_abandonment_product_left_container').html('<img class="img-responsive" id="last_cart_abandonment_product_left" src="' + shoppingCartProduct.image_url + '" alt="" />'); $('#last_cart_abandonment_product_button_buy').attr('href', shoppingCartProduct.payment_url); var questionsTitle = shoppingCartProduct.lkf_count > 1 ? 'Questions' : 'Question'; if (shoppingCartProduct.product_type == 'course') { $('#last_cart_abandonment_product_type').html('course'); var lecturesTitle = shoppingCartProduct.number_of_lectures > 1 ? 'Lectures' : 'lecture'; } else { $('#last_cart_abandonment_product_type').html('lecture'); } $("#last_cart_abandonment_product_wrapper").removeClass("hide"); $("#close-alert").click(function () { $("#last_cart_abandonment_product_wrapper").addClass("hide"); }); } else { $.removeCookie('shopping_cart_product', { path: '/' }); } } else { $.removeCookie('shopping_cart_product', { path: '/' }); } } else { $.removeCookie('shopping_cart_product', { path: '/' }); } } $('#last_cart_abandonment_product_button_close').click(function () { $.removeCookie('shopping_cart_product', { path: '/' }); $.fancybox.close(); $("#last_cart_abandonment_product_wrapper").addClass("hide"); }); $('#last_cart_abandonment_product_button_later').click(function() { hideCartAbandonmentPopupForCurrentSession(); $.fancybox.close(); $("#last_cart_abandonment_product_wrapper").addClass("hide"); }); }); </script> <!-- This workaround of the problem described in PMSHOP-442 --> </body> </html>