I want to provide a set of additional information in my bootstrap template. I want to have a set of terms and conditions with a plain english popover for certain key terms.
I've included all the correct links to the CDN and I get a popup from just the below code but when I view it as a whole page this stops working and just sends me back to the top of the page. Is there something that I need to bear in mind when doing this? I've spent days trying to tweak this to work?
Thank you
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="js/popover.js"></script>
<!-- Plugin JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<aside class="bg-dark">
<div class="container text-center">
<h2>An example of what we will do</h2>
<hr class="light">
Toggle popover
</div>
</aside>
<script>
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
</script>
You didn't set right the CDN file. Please set the right path to the jquery library and try to remove the file jquery.slim if it's not required.
Checkout the snippet
$('[data-toggle="popover"]').popover();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<aside class="bg-dark">
<div class="container text-center">
<h2>An example of what we will do</h2>
<hr class="light">
Toggle popover
</div>
</aside>
Related
I have in my project Bootstrap5, ClipboardJS, JQuery and Tooltipster.
I have tried to follow exactly the initial instructions on the Tooltipster website, I could not figure out what I missed, here are two captions, the first of the JavaScript scripts and the other of one the components (buttons) where a tooltip should appear after clicking one of them:
<!-- (Right before </body>) -->
<!-- ClipboardJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
<script>
var btns = document.querySelectorAll('.btn');
var clipboard = new ClipboardJS(btns);
</script>
<!-- Tooltipster -->
<script type="text/javascript" src="tooltipster.bundle.min.js"></script>
<script>
$(document).ready(function() {
$('.btn').tooltipster({
trigger: 'click'
});
});
</script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<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>
<button class="btn btn-outline-dark rounded ms-2" title="Copied! 🙌" type="button" data-clipboard-target="#email">
Copy
</button>
Thank you for help.
I had to load JQuery before Tooltipster as Marc said in a comment, I was not aware it matters.
I have been trying to implement a carousel for my website for 5 hours now. I want to display multiple images but increment the carousel by 1 image each time. I tried following this tutorial on youtube https://www.youtube.com/watch?v=nVNv1jUitCk until 4:45. Everything shows up fine except the previous and next buttons do not show up. I am convinced that Javascript is not working on my system, but it could be another problem. This is my 5th tutorial. Also, i dont know how to link the owl library here as it is downloaded to my local computer.
watched multiple tutorials and searched through stack overflow
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="../static/css/base.css"> -->
<!-- linking the owl carousel files -->
<link rel="stylesheet" href="../static/css/owl.carousel.css">
<link rel="stylesheet" href="../static/css/owl.theme.default.css">
<title>Carousel Demo</title>
</head>
<body>
<!-- carousel -->
<div class="container mt-5">
<div class="row">
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- linking owl js here -->
<script src="../static/js/owl.carousel.js"></script>
<!-- owl setup script -->
<script>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
</script>
</body>
</html>
expected results should be a carousel with two buttons, next and prev, that actually works.
I just tried loading up Owl-Carousel with the HTML code you supplied and it works (I adjusted the file paths to match my own). However, if you did not link your files correctly it is likely some components will not load correctly (like the arrows in your case).
If you open dev tools and head to 'console', do you see any error message in there? That will give you a clue as to what might not be loading correctly.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<meta charset="UTF-8">
<title>RNG</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<h1>Random Number Generator</h1>
<button class="btn btn-primary" id="generateButton">Generate</button>
<p id="randomNumber"></p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
And my JS/jQuery:
$("#generateButton").on("click", function() {
alert("Hello");
})
If you are wondering why the only thing my Random Number Generator is supposed to do is saying "Hello", that's because I was trying to figure out why my code wasn't working properly, and then I found out it was jQuery not working.
The file 'script.js' is linked properly though, because when I tried the normal JS alert with no jQuery code, it worked fine.
This is the part of the code where I am linking to jQuery:
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
Yes, I am linking jQuery from 3 different sources, just in case. That is because the first one didn't work, the second one didn't either, so I just wanted to make sure.
Assuming script.js is where your code lives, when you do
<script src="script.js"></script>
There is no $("#generateButton"). You can either move your script to just before the </body>, or wrap you code in
$(function() {
//your code goes here
});
which tells it to wait for the document to load before executing.
You just put your code before loading jquery, you should put your script after not before.
It make sense in programming to import or load the lib before using something from it
$(function(){
$('#generateButton').click(function(){
alert("functional");
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<meta charset="UTF-8">
<title>RNG</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<h1>Random Number Generator</h1>
<button class="btn btn-primary" id="generateButton">Generate</button>
<p id="randomNumber"></p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
I use kleeja upload script and i want to add progressbar when uploading files
I search for this a long time but i can't add this progressbar
I find many exemples with jquery but i can't add them to script
I use css style for the progressbar and javascript codes
In This Exemple when upload complete the dowload links not appear
Please help me to solve this problem
I put these codes in header templates
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript" src="js/script.js"></script> and this one the index_body template
<!--progress bar-->
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
</div>
<!-- /Progress bar -->
js and css folders http://www.gulfup.com/?fkUhK6
I'm working on a simple site but i have problem showing the cufon font, this is my first time using this feature. I'm using firefox 3.6.18
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="javascript/cufon-yui.js" type="text/javascript"></script>
<script src="javascript/corbel-bold_700.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('selector');
Cufon.replace('#sub1');
</script>
</head>
<body>
<div id="header">
<div id="logo" onclick="window.document.location.href='http://localhost/site/'"></div>
<div id="navigation">
<div class="menu">
<h1>ABOUT</h1>
<h1>GALLERY</h1>
<h1>CONTACT</h1>
</div>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
The H1 is showing but not in its cufon text. Help! Thanks in Advance!!
I'm getting a javascript error from the font file that you posted. Try with a different font and see if it works. If it does then give it another go with your file.
If your font still doesn't work then it sounds like a problem with Cufon's JS generation.