fullpageJS visual studio html - javascript

I have been asked to write a simple demo page and we settled on fullpage.js.
I have used html and css before, I typically write in c++ and c# so this is not my forte. I haven't done any front end work in a while.
For some reason, when I try to follow the official tutorial, my page has no styling and the scroll does not work. just a white page with a bit of text.
Can anyone help point me in the right direction in order to set up a simple page in visual studio?
here is the html page i have:
<!DOCTYPE html>
<html>
<head>
<link href="Content/jquery.fullPage.css" rel="stylesheet" />
<script src="scripts/jquery.fullPage.min.js"></script>
<script src="scripts/jquery-2.1.4.intellisense.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide">Section 2 Slide 1</div>
<div class="slide">Section 2 Slide 2</div>
<div class="slide">Section 2 Slide 3</div>
</div>
<div class="section">Section 3</div>
</div>
</body>
</html>

After downloading their examples it looks like you have the basic implementation correct.
Only difference is that all of their example projects include a sectionsColor: property like this
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke','#ccddff']
});
});
If adding that doesn't work, inspect element and check the console tab. See if its giving you a 404 error for your dependencies, and make sure all those paths don't need a '../', or have a bad capitalization, or dependencies are in the correct order.
But if everything is breaking with something doing this much magic for you, there's a bad bit of js some place and you only have one function to look at.
EDIT: Now that I mention it, you have jQuery below fullpage.js. It needs to be above it as javascript reads and runs those in order. So it can't see the jquery functions it needs. Switch that around and you should be fine.

Related

W3 library-not working, it seemed so simple

Do you ever look at a code and think it looks so simple?
Like it's just a simple three line code-- "I can't possibly mess this up!", you say, and end up messing it up? Because I did, and it's driving me crazy. Ok not that crazy, but I'm stumped.
I'm making an online portfolio and I wanted it to be multi-paged and realized soon enough that I can't (don't want to) rewrite the header html AND header css into each page. It's not efficient at all.
So I did some research & found W3 Data Includes library
(w3schools.com/lib/w3data.js & w3schools.com/w3css/w3data_includes.asp)
So my header:
https://jsfiddle.net/nsykep2v/
My index with W3 include:
<!DOCTYPE html>
<html lang="en">
<head>
blah blah blah
</head>
<script src="https://www.w3schools.com/lib/w3data.js">
</script>
<body>
<div w3-include-HTML="header.html"></div>
<script>
w3IncludeHTML();
</script>
<div id="blah">
blah blah blah
</div>
</body>
</html>
Don't bother running it, it's just there to give a sense of where I placed the important stuff.
Note:
I move the script tag around & no header shows up
I moved the div around & no header shows up
I merged the the script tag so it has src inside of it & still no
header shows up
They're all in the same file, right next to each other
I did some other stuff but it's basically moving around things and trying different syntax I don't think it's worth mentioning
Let me know if more info is needed.
You obviously have lots of work still to do, but this takes what you had and gets it working -- injecting the separate menu.html into index.html using the stuff you provided:
Answer in Plunker
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div w3-include-html="menu.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
menu.html:
<div class="v_dropdown">
MENU
</div>
<header class="in_dropdown">
<div id="filler_hdr" class="header">
<div id="filler_file"></div>
</div>
<div id="articles_hdr" class="header">
<div id="arcs_tab" class="tab">
<strong>Articles</strong>
</div>
<div id="arcs_file" class="file"></div>
</div>
<div id="projects_hdr" class="header">
<div id="prj_tab" class="tab">
<strong>Projects</strong>
</div>
<div id="prj_file" class="file"></div>
</div>
<div id="photo_hdr" class="header">
<div id="photo_tab" class="tab">
<strong>Photography</strong>
</div>
<div id="photo_file" class="file"></div>
</div>
<div id="blog_hdr" class="header">
<div id="blog_tab" class="tab">
<strong>Blog</strong>
</div>
<div id="blog_file" class="file"></div>
</div>
</header>
Also, make sure that you are serving up your local files using a web server and not file:// URIs when you are developing locally, as the w3data library will not work unless you serve the files from some sort of a web server.
Further, you have some pretty messed up HTML that you started with. Since it seems you are still learning some HTML basics and just trying to dive in, you might want to validate your HTML. One way to do this is by using an online tool like this.

Loading View into <div>

Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>

Having trouble putting a lightbox inside an accordion in .html

I'm currently trying to place this lightbox into this accordion
I've had them both working seperately okay, but I don't seem to be able to get them to work on the same page (whether or not one is inside the other)
I've noticed that I've ended up with:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
In my header, which might be one duplicating a more recent version of the other etc and was wondering if that could be a problem?
In the html I have:
<div id="accordion" style="width:1000px; border: 1px solid black">
<h4> Section 1 </h4>
<div>
<p> Text </p>
<img src="images/image.jpg"/>
</div>
</div>
Is there something I'm trying to do incorrectly, or is this something that just won't work in this way?
Thanks in advance for any help!
As I thought above, I had used the two different versions of JQuery and loading them both was causing a little bit of confusion.
To solve this I removed one of the JQuery sources:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
(I have also changed the sources to be local, rather than referencing a website)
Though I didn't remove the oldest, this appeared to work better for the versions of things I was trying to load. Hope this helps someone else at some point too.

Ascensor.js not working?

I've got to make a single page website for a client of mine, and the Ascensor.js plugin seems to do everything I need it to do. However, I cant for the life of me get it working.
http://kirkas.ch/ascensor/#/Home
Originally I was trying to get it working within a WordPress theme but I gave up and tried to just get it working exactly as the example on the website, no joy.
Heres the code;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.ascensor.js"></script>
<script type="text/javascript" src="./js/jquery.scrollTo-min.js"></script>
</head>
<body>
<script>
$('#ascensorBuilding').ascensor({
AscensorName:'ascensor',
ChildType:'section',
AscensorFloorName:'Home | Implementation | HTML',
Time:1000,
WindowsOn:1,
Direction:'chocolate',
AscensorMap:'2|1 & 2|2 & 3|2',
Easing:'easeInOutQuad',
KeyNavigation:true,
Queued:false,
});
</script>
<div id="ascensorBuilding">
<section>
<article class="container_12">
<h1>Home</h1>
</article>
</section>
<section>
<article class="container_12">
<h1>About</h1>
</article>
</section>
<section>
<article class="container_12">
<h1>Contact</h1>
</article>
</section>
</div>
</body>
</html>
This really should be working as i've followed the example exactly. Ive tried it with and without the classes on the article elements (I think the plugin is supposed to create these). Has anyone got experience with this plugin that can give me some help?
Thanks in advance!
First you need to wrap you code with jQuery.ready
$(function(){
$('#ascensorBuilding').ascensor({
AscensorName:'ascensor',
ChildType:'section',
AscensorFloorName:'Home | Implementation | HTML',
Time:1000,
WindowsOn:1,
Direction:'chocolate',
AscensorMap:'2|1 & 2|2 & 3|2',
Easing:'easeInOutQuad',
KeyNavigation:true,
Queued:false,
});
});
You are missing both migration plugin and easing plugin.
Demo: Fiddle
I'm leaving here a simple work I'm doing using ascensor.
Feel free to grab all the code you want.
Just remember to set "overflow:auto" to your "section" tag in css AND "overflow:hidden" to the div you use for your building, #house in my case.
http://www.thegrowth.eu/mari/index.php
The version of the plugin I'm using doesn't work on current jQuery version unless you hack the code.
Stick to version 1.8.3, you can grab it from my site.
Also, you will need nothing else but jQuery-UI to use some of ascensor's easing features and such.
And forgive my English :p

Showing random div with javascript

So I want to show random divs, and I found this stackoverflow solution here: Showing random divs using Jquery
And the correct answer uses this code: http://jsfiddle.net/nick_craver/RJMhT/
So I want to do the above, but for the life of me, I don't know how.
I thought it would be as simple as
<html>
<head>
<script type="text/javascript">
var divs = $("div.Image").get().sort(function() {
return Math.round(Math.random())-0.5; //random so we get the right +/- combo
}).slice(0,4)
$(divs).appendTo(divs[0].parentNode).show();​​
</script>
<style type="text/css">
div.Image {
display: none;
}​
</style>
</head>
<body>
<div class="Image"><img src="/image1.jpg">1</div>
<div class="Image"><img src="/image2.jpg">2</div>
<div class="Image"><img src="/image3.jpg">3</div>
<div class="Image"><img src="/image4.jpg">4</div>
<div class="Image"><img src="/image5.jpg">5</div>
<div class="Image"><img src="/image6.jpg">6</div>
<div class="Image"><img src="/image7.jpg">7</div>​
</body>
</html>
But apparently not, as nothing shows up on my screen. Can somebody help me? Should be really really easy for someone who knows the least bit about javascript I think.
Thank ya!
You are running the script before the HTML code for the body of the page has been parsed, so the elements doesn't exist yet.
Put your code in the ready event of the page:
$(document).ready(function(){
// your Javascript code goes here
});
Also you are missing the include of the jQuery library, as Conner showed.
You need to import the jQuery library.
Add
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
to your <head> tags before your javascript code.

Categories

Resources