jquery - Metroui with Javascript -
i have started working javascript.i searching lot on using metroui.org.ua not able consume .js files in html.am missing configuration ? appreciated. including html file well
<head> <link rel="stylesheet" href="../css/modern.css" /> <script src="http://www.google.com/jsapi"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> // load jquery google.load("jquery", "1"); </script> <script type="text/javascript" src="../js/tile-slider.js"></script> </head> <html> <div class="tile image-slider" data-role="image-slider"> <div class="tile-content"> <img src="../img/angrybirds.jpg"/> </div> <div class="tile-content"> <img src="../img/cuttherope.jpg"/> </div> </div>
the issue might lie jquery support winjs
please go through link
the version using might not compatible winjs. might need modifications. please let me know if worked or not.
also try spending time reading see if helps
here's code sample tested. , slider working fine. copy paste in note pad , save html. run. online api consuming code.
<!doctype html> <html xmlns="http://www.w3.org/1999/html"> <head> <meta charset="utf-8"> <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1"> <meta name="description" content="modern ui css"> <meta name="author" content="sergey pimenov"> <meta name="keywords" content="windows 8, modern style, modern ui, style, modern, css, framework"> <link href="http://metroui.org.ua/css/modern.css" rel="stylesheet"> <link href="http://metroui.org.ua/css/theme-dark.css" rel="stylesheet"> <link href="http://metroui.org.ua/css/modern-responsive.css" rel="stylesheet"> <script src="http://metroui.org.ua/js/assets/jquery-1.8.2.min.js"></script> <script src="http://metroui.org.ua/js/assets/google-analytics.js"></script> <script src="http://metroui.org.ua/js/assets/jquery.mousewheel.min.js"></script> <script src="http://metroui.org.ua/js/assets/github.info.js"></script> <script src="http://metroui.org.ua/js/modern/tile-slider.js"></script> <script src="http://metroui.org.ua/js/modern/start-menu.js"></script> <script src="http://metroui.org.ua/js/modern/tile-drag.js"></script> <title>modern ui css</title> <style> body { background: #1d1d1d; } </style> </head> <body class="metrouicss"> <div class="page secondary fixed-header"> <div class="page-header "> <div class="page-header-content"> <div class="user-login"> <a href="http://metroui.org.ua/#"> <div class="name"> <span class="first-name">sergey</span> <span class="last-name">pimenov</span> </div> <div class="avatar"> <!--<img src="http://metroui.org.ua/images/myface.jpg"/>--> <i class="icon-user fg-color-white"></i> </div> </a> </div> <h1 class="fg-color-white">start</h1> </div> </div> <div class="page-region"> <div class="page-region-content tiles"> <div class="tile-group tile-drag"> <div class="tile icon"> <div class="tile-content"> <i class="icon-calculate"></i> </div> <div class="brand"> <span class="name">calculator</span> </div> </div> <a target="_blank" id="qq" href="http://metroui.org.ua//" onclick="console.log('clicked')" class="tile image outline-color-green"> <div class="tile-content"> <img src="http://metroui.org.ua/images/myface.jpg" alt=""> </div> </a> <div class="tile icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/mail128.png"/> </div> <div class="brand"> <div class="badge">10</div> <div class="name">mail</div> </div> </div> <div class="tile bg-color-orangedark icon"> <b class="check"></b> <div class="tile-content"> <img src="http://metroui.org.ua/images/video128.png" alt="" /> </div> <div class="brand"> <span class="name">video</span> </div> </div> <div class="tile double image"> <div class="tile-content"> <img src="http://metroui.org.ua/images/5.jpg" alt="" /> </div> <div class="brand"> <span class="name">pictures</span> <div class="badge bg-color-orange">5</div> </div> </div> <div class="tile bg-color-green icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/market128.png"/> </div> <div class="brand"> <span class="name">store</span> <span class="badge">6</span> </div> </div> <div class="tile bg-color-red icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/music128.png" alt="" /> </div> <div class="brand"> <span class="name">music</span> </div> </div> <div class="tile double bg-color-bluedark"> <div class="tile-content"> <img src="http://metroui.org.ua/images/michael.jpg" class="place-left"/> <h3 style="margin-bottom: 5px;">michael_angiulo</h3> <p> saw thor last night. awesome! think you'd love it. </p> <h5>rt @julie_green</h5> </div> <div class="brand"> <span class="name">tweet@rama</span> </div> </div> <div class="tile bg-color-darken icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/youtube128.png" alt="" /> </div> <div class="brand"> <span class="name">youtube</span> </div> </div> <div class="tile double bg-color-green" data-role="tile-slider" data-param-period="3000"> <div class="tile-content"> <h2>mattberg@live.com</h2> <h5>re: wedding annoucement!</h5> <p> congratulations! i'm excited celebrate all. for... </p> </div> <div class="tile-content"> <h2>tina@live.com</h2> <h5>re: wedding annoucement!</h5> <p> huh! waw!!! i'm excited celebrate all. for... </p> </div> <div class="brand"> <div class="badge">12</div> <img class="icon" src="http://metroui.org.ua/images/mail128.png"/> </div> </div> <div class="tile double image-slider" data-role="tile-slider" data-param-period="5000" data-param-direction="left"> <div class="tile-content"> <img src="http://metroui.org.ua/images/1.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/2.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/3.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/4.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/5.jpg" alt=""> </div> </div> </div> <div class="tile-group tile-drag"> <div class="tile image outline-color-green"> <div class="tile-content"> <img src="http://metroui.org.ua/images/myface.jpg" alt=""> </div> </div> </div> <div class="tile-group tile-drag"> <div class="tile bg-color-blue icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/internetexplorer128.png"/> </div> <div class="brand"> <span class="name">internet explorer</span> </div> </div> <div class="tile icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/excel2013icon.png"/> </div> <div class="brand"> <span class="name">excel 2013</span> </div> </div> <div class="tile icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/word2013icon.png"/> </div> <div class="brand"> <span class="name">word 2013</span> </div> </div> <div class="tile icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/onenote2013icon.png"/> </div> <div class="brand"> <span class="name">onenote 2013</span> </div> </div> <div class="tile double image-set"> <div class="tile-content"> <img src="http://metroui.org.ua/images/1.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/2.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/3.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/4.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/5.jpg" alt=""> </div> <div class="brand"> <span class="name">photos</span> </div> </div> </div> <div class="tile-group"> <div class="tile double image"> <div class="tile-content"> <img src="http://metroui.org.ua/images/4.jpg" alt="" /> </div> <div class="brand bg-color-orange"> <img class="icon" src="http://metroui.org.ua/images/rss128.png"/> <p class="text">this desert eagle. hungry , angry bird.</p> <div class="badge">10</div> </div> </div> <div class="tile bg-color-blue icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/internetexplorer128.png"/> </div> <div class="brand"> <span class="name">internet explorer</span> </div> </div> <div class="tile icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/excel2013icon.png"/> </div> <div class="brand"> <span class="name">excel 2013</span> </div> </div> <div class="tile icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/word2013icon.png"/> </div> <div class="brand"> <span class="name">word 2013</span> </div> </div> <div class="tile icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/onenote2013icon.png"/> </div> <div class="brand"> <span class="name">onenote 2013</span> </div> </div> </div> <div class="tile-group tile-drag"> <div class="tile double image"> <div class="tile-content"> <img src="http://metroui.org.ua/images/4.jpg" alt="" /> </div> <div class="brand bg-color-orange"> <img class="icon" src="http://metroui.org.ua/images/rss128.png"/> <p class="text">this desert eagle. hungry , angry bird.</p> <div class="badge">10</div> </div> </div> <div class="tile bg-color-blue icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/internetexplorer128.png"/> </div> <div class="brand"> <span class="name">internet explorer</span> </div> </div> <div class="tile icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/excel2013icon.png"/> </div> <div class="brand"> <span class="name">excel 2013</span> </div> </div> <div class="tile icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/word2013icon.png"/> </div> <div class="brand"> <span class="name">word 2013</span> </div> </div> <div class="tile icon"> <div class="tile-content"> <img src="http://metroui.org.ua/images/onenote2013icon.png"/> </div> <div class="brand"> <span class="name">onenote 2013</span> </div> </div> </div> <div class="tile-group"> <div class="tile quadro double-vertical image-set"> <div class="tile-content"> <img src="http://metroui.org.ua/images/1.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/2.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/3.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/4.jpg" alt=""> </div> <div class="tile-content"> <img src="http://metroui.org.ua/images/5.jpg" alt=""> </div> <div class="brand"> <span class="name">photos</span> </div> </div> </div> </div> </div> </div> <a href='http://hit.ua/?x=19154' target='_blank'> <script language="javascript" type="text/javascript"><!-- cd=document;cr="&"+math.random();cp="&s=1"; cd.cookie="b=b";if(cd.cookie)cp+="&c=1"; cp+="&t="+(new date()).gettimezoneoffset(); if(self!=top)cp+="&f=1"; //--></script> <script language="javascript1.1" type="text/javascript"><!-- if(navigator.javaenabled())cp+="&j=1"; //--></script> <script language="javascript1.2" type="text/javascript"><!-- if(typeof(screen)!='undefined')cp+="&w="+screen.width+"&h="+ screen.height+"&d="+(screen.colordepth?screen.colordepth:screen.pixeldepth); //--></script> <script language="javascript" type="text/javascript"><!-- cd.write("<img src='http://c.hit.ua/hit?i=19154&g=0&x=2"+cp+cr+ "&r="+escape(cd.referrer)+"&u="+escape(window.location.href)+ "' border='0' wi"+"dth='1' he"+"ight='1'/>"); //--></script> <noscript> <img src='http://c.hit.ua/hit?i=19154&g=0&x=2' border='0'/> </noscript></a> <!-- / hit.ua --> </body> </html>
Comments
Post a Comment