Search jQuery

jQuery Forum

Trouble Installing Paver Plugin

in Using jQuery Plugins • 5 years ago

I'm coding a website for this charity event and although I can write HTML, I have no experience in java or jquery, as you can probably see by the code. I have managed to implement 2 plugins so far - FadeThis and Shine.js however upon trying to install Paver to add a panorama to the page, I somehow broke it and even when the page was working, the panorama aspect didn't. I will eventually get round to learning jquery however at this point I would appreciate if someone could help on this specific task as we are one a somewhat tight schedule. Thanks for you help.

<!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 name="description" content="Open Source Images"/>
<meta name="google-site-verification" content="bPSa0t8kOsCtCAQutkxSznVbdDAGIO1SyPRRjDIrPx8"/>
<title>NCSiesta | Charity Dog Show</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/paver.min.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ba-throttle-debounce.min.js"></script>
<script src="js/jquery.paver.min.js"></script>
<script src="js/jquery.fadethis.min.js"></script>
<script src="js/shine.min.js"></script>
</head>
<body>
<script>document.body.className += ' fade-out';</script>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<img src="assets/Logo2bNav.thick.png" width="50" height="50" alt="Logo">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="activities.html">Activites</a></li>
<li class="nav-item active"><a class="nav-link" href="venue.html">Venue<span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
</ul>
<a class="btn btn-outline-ncsiesta form-inline my-2 my-sm-0" href="https://gf.me/u/bm6h48">Donate</a> </div>
</nav>
</div>
<div class="pageheader">
<div class="container">
<div class="headerText">
<p id="shine">Charity Dog Show</p>
</div>
<div class="extra">
<p>Brought to you by NCSiesta</p>
</div>
</div>
</div>
<div class="pageheader2"></div>
<div class="pageheader3"></div>
<div class="panorama">
<img src="assets/panorama.png" alt="Panorama" title="Panorama"/>
</div>
<div class="container">
<div class="row">
<div class="col-10">
<div class="hidden-md-down">
<div class="card" style="margin-bottom: 1.25rem;">
<div class="card-block">
<h3 class="card-title"><img src="assets/twitter.png" width="30" height="30" class="d-inline-block align-top" alt=""> Twitter</h3>
<p class="card-text">Any questions or queries, chat with us on twitter!</p>
<a href="https://twitter.com/NCSiesta" class="btn btn-ncsiesta">@NCSiesta</a></div>
</div>
<div class="card" style="margin-bottom: 1.25rem;">
<div class="card-block">
<h3 class="card-title"><img src="assets/instagram.png" width="30" height="30" class="d-inline-block align-top" alt=""> Instagram</h3>
<p class="card-text">Show us some support over on our instagram page!</p>
<a href="https://instagram.com/NCSiesta" class="btn btn-ncsiesta">@NCSiesta</a></div>
</div>
<div class="card" style="margin-bottom: 1.25rem;">
<div class="card-block">
<p class="lead">Contact Form</p>
<form method="post" role="form">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Your Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Your Email">
</div>
<div class="form-group">
<input type="text" name="message" class="form-control" style="padding-bottom:40px;" placeholder="Message">
</div>
<br>
<div class="checkbox">
<label class="custom-control custom-checkbox">
<input type="checkbox" name="check" class="custom-control-input">
<span class="custom-control-indicator"></span><span class="custom-control-description">I am human</span></label>
</div>
<div align="center">
<input type="submit" name="submit" class="btn btn-ncsiesta" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden-lg-up">
<div class="container">
<hr class="my-4">
<div class="rowContact">
<p class="lead">Contact Form</p>
</div>
<div class="rowContact">
<form method="post" role="form">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Your Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Your Email">
</div>
<div class="form-group">
<input type="text" name="message" class="form-control" style="padding-bottom:40px;" placeholder="Message">
</div>
<div class="checkbox">
<label class="custom-control custom-checkbox">
<input type="checkbox" name="check" class="custom-control-input">
<span class="custom-control-indicator"></span><span class="custom-control-description">I am human</span></label>
</div>
<div align="center">
<input type="submit" name="submit" class="btn btn-ncsiesta" value="Submit">
</div>
</form>
</div>
</div>
</div>
<footer>
<div class="footerBlue">
<div class="container">
<div class="row justify-content-around">
<div class="col-auto">
<ul class="social-network social-circle">
<li><a class="icoMail" title="Mail"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://www.facebook.com/events/2005754382977812/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/NCSiesta" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.instagram.com/NCSiesta/" class="icoInstagram" title="Instagram" ><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="legal">
<p>Copyright © NCSiesta 2017. All Rights Reserved. I don't know what this means.</p>
</div>
</div>
</div>
</div>
</footer>
<script>
$(function() {
$('div.panorama').paver();
});
</script>
<script>
$(document).ready(function() {
$(window).fadeThis({reverse: false, speed: 500, offset: -300});
});
</script>
<script type="text/javascript">
var shine = new Shine(document.getElementById('shine'));
function handleMouseMove(event) {
shine.light.position.x = event.clientX;
shine.light.position.y = event.clientY;
shine.draw();
}
window.addEventListener('mousemove', handleMouseMove, false);
</script>
<script>
$(function() {
$('body').removeClass('fade-out');
});
</script>
<script type="text/javascript">
$(function() {
// Paver
$('div.panorama').paver();
});
</script>
<script>
$(document).ready(function ($) {
$('.cycle').cyclotron();
});
</script>
</body>
</html>

Replies(2)

jakecigar

Re: Trouble Installing Paver Plugin

5 years ago

Open up the developer tools (Chrome has good ones). Check for errors.

JΛ̊KE

watusiware

Re: Trouble Installing Paver Plugin

5 years ago

"I somehow broke it" tells us nothing useful.

Can you provide a link to your site, and tell us exactly what doesn't work as you expect?

Also, we can't guess what plugins you used. Many plugins have similar or identical names. I was able to find Paver and FadeThis but can't be absolutely sure they are what you used. FadeThis hasn't been updated by the author in 3 years, and so might be "abandonware". You should always check the "freshness date" of plugins, and always make sure you get them from the author's own website or (typically) their Github. Always provide links to plugins.

Is there a reason you are using an old, obsolete version of jQuery?

BTW, it is Javascript, not Java. The two languages have nothing in common.

Top Reply

Response title

Attachments

jQuery Forum

Trouble Installing Paver Plugin

Replies(2)

Re: Trouble Installing Paver Plugin

Re: Trouble Installing Paver Plugin

Statistics

Tags

Actions