I'm so newbie in javascript !
I need your help, guys (pretty please).
I need to initialize fullPage.js plugin into my webpage, but I don't know what is missing. I've read the tutorial for this but I'm doing something wrong and I don't know what.
This is my html code:
<head>
<title>Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href='css/style.css' type='text/css' media='all' />
<link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
<link rel="shortcut icon" href='img/favicon.ico' type='image/x-icon'/ >
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> <!-- fullPage.js plugin -->
<script src="js/script.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script> <!-- fullPage.js plugin -->
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script> <!-- fullPage.js plugin -->
<script type="text/javascript" src='js/jquery-migrate.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
scrollingSpeed: 1000
});
});
</script>
</head>
<body>
<div class="container-fluid" id="fullpage">
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- fullPage.js plugin -->
</body>
Many thanks,
Sandra P.
I think this can help you.
And I recommend to try to replace it:
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script>
to this
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
This should correct the error TypeError:. $(...).Fullpage.
Just look at the live example.
I changed your example and it works, see this.
Update
Properly include in that order:
Styles;
jQuery;
jQuery Migrate (I think you do not need it);
jQuery FullPage and other jQuery
plugins;
you code.
it should look like this
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<link rel="stylesheet" type="text/css" href="youCSS" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<!--other jQuery plugins-->
<script type="text/JavaScript" src="youJS"></script>
Update 2
Replace youJS :)
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#fullpage').fullpage({
anchors : ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
scrollingSpeed : 1000
});
});
</script>
</head>
<body>
<div class="container-fluid" id="fullpage">
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
</div>
</body>
Related
I am trying to use coreui for a project im starting but for somereasson it dosent work I tried using the template the site gives and I cant get it to work. Am I doing something wrong or am I forgeting something?
`
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CoreUI CSS -->
<link rel="stylesheet" href="https://unpkg.com/browse/#coreui/coreui#2.1.16/dist/css/coreui.min.css">
<title>Hello, world!</title>
</head>
<body class="app">
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col">
1/2
</div>
<div class="col">
1/2
</div>
</div>
<div class="row">
<div class="col">
1/3
</div>
<div class="col">
1/3
</div>
<div class="col">
1/3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, Bootstrap, then CoreUI -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/browse/#coreui/coreui#2.1.16/dist/js/coreui.min.js"></script>
</body>
</html>
`
I tried following the tutorial on the page but i couldnt get coreui to work.
I am fairly new to this, and am unable to figure out why the animation won't trigger. I linked the script source to anime.min.js, I can see it in the sources panel. I even tried to use the cdnjs, but that didn't work either.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- jlondono Stylesheet -->
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css" media="screen"/>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xs-12">
<div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
</div>
</div>
</div>
<!-- Anime JS -->
<script src="/script/anime.min.js"></script>
<script>
anime({
targets: '.bluesquare',
translatex: 250
});
</script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
anime({
targets: '.bluesquare',
translatex: 250
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://jlondono.me/script/anime.min.js"></script>
<div class="container mt-5">
<div class="row">
<div class="col-xs-12">
<div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
</div>
</div>
</div>
A . is usually used to indicate a class selector.
<div **class**="bluesquare" class="bg-primary" style="height: 150px; width: 150px;"></div>
Okay, so after hours of watching Youtube and looking at forum, its turns out it was a couple of things.
The targets was incorrect (after I changed this, it still didn't work)
I didn't capitalize the "X" in translateX.....
OOF. Thank you everyone
try This
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- jlondono Stylesheet -->
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xs-12">
<div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Anime JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
anime({
targets: '.bluesquare',
width: '100%', // -> from '28px' to '100%',
easing: 'easeInOutQuad',
direction: 'alternate',
loop: true
});
</script>
</body>
</html>
Add File After Bootstrap.js
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Anime JS -->
<script src="/script/anime.min.js"></script>
<script>
anime({
targets: '.bluesquare',
translatex: 250
});
</script>
</body>
</html>
So i've been trying to use slick slider for my website. I have all the files in the correct folder, there is no error in my console. My images are cards are showing but these are in line vertically, and i don't know what I'm doing wrong. here is my HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Palvisha Shoaib</title>
<link rel="stylesheet" type="text/css"href = "style.css">
<link rel="stylesheet" type="text/css"href = "slick.css">
<link rel="stylesheet" type="text/css"href = "slicktheme.css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<div class="box6">
<section class="variable slider">
<div>
<div class="row">
<div class="col s12 m7">
<div class="card" style="width: 250px;">
<div class="card-content">
<p>content</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card" style="width: 250px;">
<div class="card-content">
<p>content</p>
</div></div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
I recommend looking on this website, it has an in-depth tutorial on the slick slider. https://kenwheeler.github.io/slick/
I can see that you don't have this function in your code
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
I am using fullPage.js for my website. I went to test it and it isn't functioning like it is supposed to and creating a full height page. I tried changing the scripts and links around, as well as using different jQuery Libraries. All the sources are 100% correct. Any leads or suggestions? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap / CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
</head>
<body>
<div id="fullpage"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
library :: https://cdnjs.com/libraries/fullPage.js
so you have to change the src attribute of script file .
since you are using src of full page is jquery.fullPage.js but that is not valid .
use https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js in src attribute .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css" />
</head>
<body>
<div id="wrapper"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
Change id="wrapper" to id="fullpage"
Default structure looks like below:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
I'm using JQuery UI to render a tabbed layout. My markup is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-ui.js" type="text/javascript">
</script>
<script src="js/jquery-ui.min.js" type="text/javascript">
</script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-
theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery-ui.min.js"></script>
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script></head>
<body>
<img src="images/logo_big.gif" alt="Logo"/><br/>
<div id="tabs">
<ul>
<li>Introduction</li>
<li>Family</li>
<li>Wills</li>
</ul>
</div>
<div id="#tabs-1">
<h1>Introduction</h1>
</div><!-- Tabs1 -->
<div id="#tabs-2">
<h2>Family Status</h2>
</div><!-- Tabs2 -->
</body>
</html>
How does the above markup need to be modified so that the Jquery UI tabs are properly rendered?
It looks like you were loading jquery twice, also I think you need to move your init function below the links to jquery, like this:
<!doctype html> <html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-
theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery-ui.min.js"></script>
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<img src="images/logo_big.gif" alt="Logo" />
<br/>
<div id="tabs">
<ul>
<li>Introduction
</li>
<li>Family
</li>
<li>Wills
</li>
</ul>
</div>
<div id="#tabs-1">
<h1>Introduction</h1>
</div>
<!-- Tabs1 -->
<div id="#tabs-2">
<h2>Family Status</h2>
</div>
<!-- Tabs2 -->
</body> </html>