javascript - ensure all prerequisite components in .js file // example page malfunction -
i tried setup basic index.html page, seems it's broken.
i can't find questions people had similar issue.
the page renders looking if it's merely ill-formatted html.
maybe have include additional libraries? link in different way? in this question alvaro, createur, himself seems much, doesn't specify how.
thus far i've directly copied example this video not working, switched , implemeted demo page, still no improvement.
see my site maybe indication of problem.
is there prerequisite need install make file work in this way:
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>fullpage.js 1 page scroll sites</title> <meta name="author" content="alvaro trigo lopez" /> <meta name="description" content="fullpage plugin alvaro trigo. create fullscreen pages fast , simple. 1 page scroll iphone website." /> <meta name="keywords" content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple" /> <meta name="resource-type" content="document" /> <link rel="stylesheet" type="text/css" href="../jquery.fullpage.css" /> <link rel="stylesheet" type="text/css" href="examples.css" /> <style> /* sections * --------------------------------------- */ #section0 img, #section1 img{ margin: 20px 0 0 0; } #section2 img{ margin: 20px 0 0 52px; } #section3 img{ bottom: 0px; position: absolute; margin-left: -420px; } .intro p{ width: 50%; margin: 0 auto; font-size: 1.5em; } .twitter-share-button{ position: absolute; z-index: 99; right: 149px; top: 9px; } </style> <!--[if ie]> <script type="text/javascript"> var console = { log: function() {} }; </script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <script type="text/javascript" src="../jquery.fullpage.js"></script> <script type="text/javascript" src="examples.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#fullpage').fullpage({ sectionscolor: ['#1bbc9b', '#4bbfc3', '#7baabe', 'whitesmoke', '#ccddff'], anchors: ['firstpage', 'secondpage', '3rdpage', '4thpage', 'lastpage'], menu: '#menu', scrollingspeed: 1000 }); }); </script> </head> <body> <select id="demosmenu"> <option selected>choose demo</option> <option id="backgrounds">background images</option> <option id="backgroundvideo">background video</option> <option id="gradientbackgrounds">gradient backgrounds</option> <option id="backgroundsfixed">fixed fullscreen backgrounds</option> <option id="looping">looping</option> <option id="noanchor">no anchor links</option> <option id="scrollingspeed">scrolling speed</option> <option id="easing">easing</option> <option id="callbacks">callbacks</option> <option id="css3">css3</option> <option id="continuous">continuous scrolling</option> <option id="normalscroll">normal scrolling</option> <option id="scrollbar">scroll bar enabled</option> <option id="scrolling">scroll inside sections , slides</option> <option id="navigationv">vertical navigation dots</option> <option id="navigationh">horizontal navigation dots</option> <option id="fixedheaders">fixed headers</option> <option id="apple">apple iphone demo (animations)</option> <option id="onesection">one single section</option> <option id="responsive">responsive</option> <option id="methods">methods</option> </select> <ul id="menu"> <li data-menuanchor="firstpage"><a href="#firstpage">first slide</a></li> <li data-menuanchor="secondpage"><a href="#secondpage">second slide</a></li> <li data-menuanchor="3rdpage"><a href="#3rdpage">third slide</a></li> <li data-menuanchor="4thpage"><a href="#4thpage">fourth slide</a></li> </ul> <div id="fullpage"> <div class="section " id="section0"> <h1>fullpage.js</h1> <p>create beautiful fullscreen scrolling websites</p> <img src="imgs/fullpage.png" alt="fullpage" /> </div> <div class="section" id="section1"> <div class="slide"> <div class="intro"> <h1>create sliders</h1> <p>not vertical scrolling horizontal scrolling. fullpage.js able add horizontal sliders in simple way ever.</p> <img src="imgs/slider.png" alt="slider" /> </div> </div> <div class="slide"> <div class="intro"> <img src="imgs/1.png" alt="simple" /> <h1>simple</h1> <p>easy use. configurable , customizable.</p> </div> </div> <div class="slide"> <div class="intro"> <img src="imgs/2.png" alt="cool" /> <h1>cool</h1> <p>it looks cool. impress simple , modern web design!</p> </div> </div> <div class="slide"> <div class="intro"> <img src="imgs/3.png" alt="compatible" /> <h1>compatible</h1> <p>working in modern , old browsers too! ie 8 users don't have fault of using horrible browser! lets give them chance see site in proper way!</p> </div> </div> </div> <div class="section" id="section2"> <div class="intro"> <h1>example</h1> <p>html markup example define 4 sections.</p> <img src="imgs/example2.png" alt="example" /> </div> </div> <div class="section" id="section3"> <div class="intro"> <h1>working on tablets</h1> <p> designed fit different screen sizes tablet , mobile devices. <br /><br /><br /><br /><br /><br /> </p> </div> <img src="imgs/tablets.png" alt="tablets" /> </div> </div> </body> </html>
within index page on site have links javascript files e.g.
<script src="vendors/jquery.easings.min.js"></script> <script type="text/javascript" src="jquery.fullpage.js"></script> neither of these files refer in location specified, i.e. browser cannot find files download.
if files supposed in directory "vendor" there should "vendor" directory underneath directory of index.html file. jquery.fullpage.js file should in same directory index.html file.
the above said, try keep js files in single directory or confusing.
Comments
Post a Comment