Add canvas to fullpage.js - javascript

I'm trying to add a WebGL-script to a site with FullPage.js but it doesn't work so well (I just get a black screen). I have no idea what the problem is since both the WebGL-script and Fullpage.js work perfect separately. I was not able to add all the script to a jsFiddle but the scripts can be seen at this site http://www.scandinavija.com/index.html (I removed all the non-relevant script).
When I inspect the site in Chrome I get the following error: "Uncaught TypeError: Cannot read property 'offsetWidth' of null at particles.js:6" May that be the problem?
My instinct, however, rather tells me that the problem should be somewhere here:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<link rel="stylesheet" type="text/css" href="css/examples.css">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<!-- Particles (three.js) -->
<script type="text/javascript" src="js/detector.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/particles.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: true,
anchors: ['firstSection', 'secondSection', '3rdSection',
'4thSection', '5thSection'],
});
});
</script>
</head>
<body>
<!-- My canvas (three.js) below -->
<div id="canvas-container"></div>
<div id="fullpage">
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
<div class="section" id="section5"></div>
</div>
</body>
</html>
CSS:
#CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
background-color: #000;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* START OF MY SCRIPT BELOW*/
#canvas-container {
z-index: 1000;
position: absolute;
width: 100%;
height: 100%;
}

You get this error because you try to access a property of an object that is evaluated to null.
particles.js
var container = document.getElementById('canvas-container');
// ^^^^^^^^^^^^^^^^
// not found
var w = container.offsetWidth;
// ^^^^^^^^^
// eq. null
This is because your element #canvas-container doesn't exists in the DOM when the script particles.js is executed.
You just have to wrap your code inside a document loaded callback to ensure the element will be accessible :
$(function() {
// particles.js code
});
You can also simply move your script tag at the end of your HTML file :
...
<script type="text/javascript" src="js/particles.js"></script>
</body>

Related

Getting JavaScript code errors, can anyone help me?

I am getting a few errors within JavaScript. I am fairly new at JavaScript/Jquery. I have checked the errors over google and I understand the errors, however they still appear after attempting to troubleshoot these problems....
Errors are shown on this link:
JavaScript Console Errors
I have tried - Changing file directories, - changing file names, - adding JQuery CDN as first point of call in HTML as expected,- adding a Local Jquery file, - Adding Particles.js and Typed.Js in body tags, adding the js code within body.
HTML Code shown below:
<!DOCTYPE html>
<html>
<head>
<meta lang="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link rel="stylesheet" href="stylesheet/normalize.css">
<link rel="stylesheet" href="stylesheet/bootstrap.min.css">
<link rel="stylesheet" href="stylesheet/c0nsec.min.css">
<!-- Scripts -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/particles.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/typed.js"></script>
<script type="text/javascript" src="js/c0nsec.min.js"></script>
<!-- My own js file -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<div id="particles-js"></div>
<!-- For full body paricles -->
<div class="container">
<section class="mainLanding">
<div class="row">
<div class="col-md-12 col-sm-12">
<h1 class="test"> ELLO WORLD M8</h1>
<div class="center">
<!-- For typed.js plugin -->
<span class="type"></span>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
CSS code shown Below:
/*======================*/
/* DEFAULT TEMPLATE*/
/*======================*/
html {
font-family: 'Source Sans Pro', Sans-Serif;
}
body {
background: #1f1f1f;
}
/* Particles JS tag */
#particles-js {
width: 100%;
height: 100%;
}
/*======================*/
/* HEADER */
/*======================*/
/*======================*/
/* HEADINGS */
/*======================*/
.test {
font-family: Source Sans Pro;
font-weight: 300;
color: #fff;
text-align: center;
font-size: 7vh;
}
/*======================*/
/* SECTIONS */
/*======================*/
.mainLanding {
position: relative;
top: 50vh;
width: 100vh;
height: 100vh;
left: 0;
right: 0;
}
/* Typed JS tags */
.center {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
text-align: center;
width: 100%;
}
.center span {
font-family: Source Sans Pro;
font-size: 5em;
color: #fff;
}
JavaScript code shown below:
// Custom Typed.js scripts
$(function() {
$(".type").typed({
strings: [
"Hello World",
"We are C0nSec, we consult with security vulnerabilites",
"Our mission is to keep the internet safe from criminals"
],
typeSpeed: 70,
backDelay: 200,
loop: true
})
})

JS/CSS Slide effect works in fiddle, not in html

My first problem was about the fiddle not working. Now it works, but if I copy it into my brackets file it doesn't work anymore. I did include the link that I placed in the external resource.
Here's the fiddle: https://jsfiddle.net/wtbdxx2b/6/
And the html;
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="site3.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="site3.js"></script>
</head>
<body>
<button class="trigger">
click
</button>
<div class="content">
hello
</div>
</body>
</html>
the css;
.content {
position: absolute;
width: 100%;
height: 10%;
bottom: 0;
left: 0;
background-color: #000;
color: #FFF;
transition: all 1s;
}
.content.open {
height: 90%;
}
and the javascript;
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
Put
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
Inside
$(document).ready(function(){
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
});

JQuery script with html and css

I have these files in the same folder:
index.html
style.css
script.js
I want the nav#menu be nav#menu.sticky on top when I scroll. It should be like http://iconmonstr.com/ but nothing. I only know html and css.
index.html
<!DOCTYPE html>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<header id="main-header">
<h1>Title</h1>
<h2>Slogan</h2>
</header>
<nav id="menu">
</nav>
<section id="main-section">
</section>
<footer id="main-footer">
© 2014 Copyright
</footer>
style.css
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
}
body {
margin: 0;
}
h1 {
font-size: 3em;
margin: 0;
}
h2 {
font-size: 2em;
margin: 0;
}
#main-header {
background: #08c;
color: #fff;
height: 10em;
padding: 2em;
text-align: center;
}
#menu {
background: red;
height: 3em;
width: 100%;
}
.sticky {
position: fixed;
top: 0;
}
#main-section {
border: 0.1em solid #ccc;
color: #444;
height: 1000px;
}
#main-footer {
font-size: 0.75em;
text-align: center;
margin: 1em;
}
script.js
$(document).ready(function() {
var menu = $("#menu");
var pos = menu.position();
$(window).scroll(function() {
if ($(window).scrollTop() >= pos.top) {
menu.addClass("sticky");
} else {
menu.removeClass("sticky");
}
});
});
You're using jQuery in script.js but you don't include the library.
You have malformed html code.
Try following code. It's working for me.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<header id="main-header">
<h1>Title</h1>
<h2>Slogan</h2>
</header>
<nav id="menu">
</nav>
<section id="main-section">
</section>
<footer id="main-footer">
© 2014 Copyright
</footer>
<script src="script.js"></script>
</body>
</html>
What I've changed?
I've added body and head tags,
I've put script which include jQuery from CDN in head tag but you can include this just before including your script and it can be loaded locally, not from CDN,
I've move your script tag to the end because it's generally good practice. Briefly speaking page is rendered faster.
In addition, you wrote "The script doesn't work and in the developer tools of Firefox and Chrome in the section Javascript I don't see anything.". You should see in the console tab in Chrome: "Uncaught ReferenceError: $ is not defined".
On the future: you should paste the code much earlier.
old:
Try this:
<script src="script.js" type="application/javascript"></script>
Information for downvoters:
in HTML 4.x type attribute should be specified. In html5 is optional.
When you type
<script src="script.js"></script>
in HTML document, you create a "relationship" (browser loads JS and parses it accordingly)
Same goes for CSS files. If they are in same page, they can interact (you can set CSS classes by JS on elements)
Beginner gave an example of how to provide function to your javascript file.
When adding files to your html source, you must use html syntax.
<script src="script.js">
/**
* Additional code may even go here
*/
</script>
Follows this syntax.
When adding the css file you'll want to continue to use html syntax as well.
<link href="style.css" rel="stylesheet" type="text/css">

Cylcle2 no cycle-pager shows up

I'm trying to make a slideshow for a website where the pictures slides automaticly (which works), and there should be round buttons to click below it. But the buttons doesn't show up, even thou I have follow the instructions from http://jquery.malsup.com/cycle2/demo/pager.php
my HTML:
<div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager">
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
</div>
<div class="cycle-pager"></div>
My CSS:
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: absolute;
top: 10px;*
overflow: hidden;
}
.cycle-pager span {
font-family: arial;
font-size: 50px;
width: 16px;
height: 16px;
display: inline-block;
color: #999999;
cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
.cycle-pager{
width: 500px;
height: 30px;
margin-top: 517px;
}
and my JavaScript:
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
This problem causes doctype Use <!doctype html>
try this javascript
<Script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<Script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
</script>
Try this:
JSFiddle Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
</head>
<body>
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000">
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
</body>
</html>
Try adding "height:40px;" to the .cycle-pager class.

how to change the default load ajax loader gif in jquery mobile

I have already seen the docs for jquery mobile but couldn't understand how to integrate it on my mobile website. The docs are here at
http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html
Actually the gif image doesn't animate on 2.x android devices so I am thinking about making a text only kind of pre loading widget.
I tried changing it via css like this
.ui-icon-loading {
background: url(themes/images/custom-ajax-loader.gif);
}
but the new imag doesn't scale properly and the old background is still visible.
I am a complete noob with javascript.can someone plz help me with this?
You are mentioning the jQM 1.2 Alpha Docs so my answer is based in this jQM version.
Below you can find 2 options to change the default loader image.
Solution 1
As stated in the jQM 1.2 Alpha Docs:
When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind to mobileinit. Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
To configure the loading dialog globally the following settings can be defined on its prototype during the mobileinit event:
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
Below you can find a working example in which you can fully customize the loader in the html prototype option.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../images/my-custom-image.png' /><h2>loading</h2></span>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.loading('show');
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
Solution 2
Override the default CSS styles used to depict the page loader.
EDITED
For jQM 1.1.1 version there are the following configurable options:
loadingMessage string, default: "loading"
Set the text that appears when a page is loading. If set to false, the message will not appear at all.
loadingMessageTextVisible boolean, default: false
Whether the text should be visible when a loading message is shown. The text is always visible for loading errors.
loadingMessageTheme string, default: "a"
The theme that the loading message box uses when text is visible.
Code example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loadingMessageTheme = 'e';
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessage = "test";
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.showPageLoadingMsg();
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
Furthermore you could try to override the default CSS used to style the jQM loader. More specifically you could modify or override the styles in the section loading screen and the style in the section loading icon which are used to depict the page loader.
You will find here the CSS used in jQM 1.1.1.
/* loading icon */
.ui-icon-loading {
background: url(images/ajax-loader.gif);
background-size: 46px 46px;
}
/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }

Categories