[JS Frameworks] Домашно Modernizr.JS


11

Linkhttps://github.com/vlad0/TelerikAcademy/tree/master/JSFrameworks/Modernizr.JS

Task1 - свалих си parser-a, който са ни дали от презентацията/UA-Parser/
Link UA-Parser - https://github.com/faisalman/ua-parser-js, като скролнете надолу има описание как се ползва. За втората част на задачата отворих сорса на линка от презентацията /http://fiddle.jshell.net/ncuesta/NHTyT/show/ и го копирах - няма голяма философия за разбиране, само трябва да си свалите пълен modernizr.js

Task2 - Направих втора задача за canvas като използвах polyfill FlashCanvas http://flashcanvas.net/download. Съответно за да може да се изпозлва клиента трябва да има инсталиран Flash Player. От .ZIP-a ви трябват два файла: flashcanvas.js и flashcanvas.swf. Като flashcanvas.swf трябва да се сложи във същата папка където ви е html файлът. Чертането трябва да се прави, когато се е заредил flashcanvas.js фалът, следователно е най-добре да се добави в complete: function() {} на Modernizr.load(); Тествано до IE 7 - рисува си грозния червен правоъгълник :D

Task3 - пак доста copy/paste задача. Ето линк: http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks/ search-нете по текста за date и ще ви заведе на правилното място :) Малко си поиграх с версиите на jQuery и jQueryUI, докато тръгне на IE7, а именно:
jQuery - 1.4.4
jQuery - 1.10.0




Отговори



1

Здравей vlad0, имаше ли проблеми при  втора задача. Правя всичко както трябва, но получавам съобщение в конзолата на IE: SCRIPT438: Object doesn't support property or method 'getContext'. Двата файла са в същата папка, като html-а. Когато погледна в head тага, се вижда, че Modernizr е заредил flashcanvas.js.

Работещ код за 2-ра задача - http://pastebin.com/QjAB03W4

Ето го кода ми:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>02. Canvas</title>
    <script type="text/javascript" src="Scripts/modernizr-2.6.2.js"></script>
</head>
    <body>
        <script type="text/javascript">
            Modernizr.load({
                test: Modernizr.canvas,
                nope: 'flashcanvas.js'
            });
        </script>

        <canvas id="myCanvas" style="border:1px solid red; width: 200px; height: 100px;"></canvas>

        <script type="text/javascript">
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.fillStyle="#FF0000";
            ctx.fillRect(0,0,150,75);

        </script>
    </body>
</html>




0
Дори пробвах с това - в head-a, но същото.


0
може да не ти е load-нал context елемента, когато го взимаш? Другото, което виждам, че modernizr-a ти е в папка scripts, a дали flashcanvas.cs ти е в папката с html/виж пътищата/? Стартирам проекта с Ctrl+F5, защото иначе при мен не тръгваше canvas-a, т.е. трябва да минава през някакъв сървър/VS-a пуска IIS/ Това са ми предположенията сега ще го пусна при мен кода и ще пиша пак ;)

от vlad0 (6103 точки)



4

И мене ме измъчи втората задачка най-много. Правих я с excanvas и докато не му дам линк в проекта не тръгва. Което не е много смислено защото тогава си върви и без Modernizr.load(). Но не се сетих за по-добър вариант. Интересно е, че на трета задача пикера ми тръгва на ИЕ7 само ако съм с jquery-1.9.1, с по-ново не иска.

Домашно.


от tankovski (2828 точки)


8

Между другото това за   jquery-1.9.1  е доста важна подробност и се чудя г-н танковски стигна до това прозрение. И ВСЕ ПАК ЗА ВСИЧКИ КОИТО СЕ ЧУДЯТ ЗАЩО ГЪРМИ ЗАДАЧАТА ВИ  ИЗПОЛЗВАЙТЕ  jquery-1.9.1


от Al.polichronov (1567 точки)


2

Решения

Който тепърва започва домашното - първо да провери с кои версии на jQuery/UI е съвместим IE 7 и да използва тях. В противен случай рискува да си причини огромни главоболия и след това да мине на старите версии. xD


от georgi.ivanov (3261 точки)


1

Здравейте,

Това домашно направо ми скъса нервите. Първа задача мина приятно.

Втора задача и аз започнах да я правя с excanvas. Съответнио исках да я направя културно - да се зарежда само когато трябва. Е да, ама не след час лутане се загледах, че трябва да е в хедъра за да работи. Изместих load-a на Modernizr в head-a, но асинхронната му работа пак обърка нещата. Пробвах допълнително да заредя canvas-a с

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);

var ctx = el.getContext('2d');

но отново без успех.

Накрая реших да пробвам flashcanvas и го подкарах без проблем ...

На последната задача с datetime picker-а направо се изкефих на Modernizr след като открих, че даже и css мога да си заредя.

nope: ['/Scripts/jquery-1.9.1.js', '/Scripts/jquery-ui-1.10.3.js', 'Styles/jquery-ui-1.10.3.custom.css']

Ето и кода на задачите.

Ще се радвам на всякакви съвети/критики.

 

Поздрави!

 


от nikolaikolarov (2177 точки)


5

Ето и моето Решение

vlad0, много ми помогна за това домашно, благодаря ти :-) Данчо също (iordan_93)

За геолокациите взехме кода от тук и след това разбира се го променихме доста. :-) За canvas - canvas кодът трябва да се запази в отделен .js файл, който след това да се зареди в "nope" на Modernizr.load();

 


от sabrie_n (625 точки)