Cannot get Bootstrap.min.js to function correctly - javascript

I'm at my wits end right now trying to get bootstrap.min.js to work. I have bootstrap.min.js hosted on my server in bootstrap-3.1.1-dist/js/
In my header I have
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Rochester Michigan Computer Repair and Web Design">
<title>Tony Weed - Michigan IT Services</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<link href="bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
I'm trying to call a tooltip using
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
but I just cannot get it to work. I've been staring at this for the past few hours and I'm thinking it's something that I'm overlooking. I'm hoping a second set of eyes will help.
Would my web host have anything to do with this perhaps? I'm running through ipage

From the bootstrap tooltip docs:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
You will need to call:
$('[data-toggle="tooltip"]').tooltip();
Also you should initiate the tooltip after the DOM is loaded.
Wrap your JS code in jQuery.ready

You are calling initialization of plugin before any of these targeted elements is available in the DOM. You could just wrap it inside document ready handler:
$(function () {
$('li[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
});
You should really have provided more context in your question, this would have been fixed in few seconds...

I'm not sure if it will fix the problem but the script should be at the bottom of the page instead of in the the <head>

Related

snipcart error: public API key not found. Attribute data-api-key must be set on #snipcart tag

I am having trouble loading snipcart correctly, it picks up the api key on localhost and shows the number of items in cart however when deployed to netlify, it will briefly flash up the number of items in cart when the page is loaded indicating that the api key is correct however it then comes up with the error
public API key not found. Attribute data-api-key must be set on #snipcart tag.
I am using react to render it, and have taken it down to the minimal boilerplate to see if anything in react could be causing this but I still have the same problem.
moving <div hidden id="snipcart" data-api-key={{ API_KEY }}></div> to app.js file and it works, but in index.html it doesn't work
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href ="https://fonts.googleapis.com/css2?family=Open+Sans&family=Lexend+Zetta&family=Poppins:wght#400;500;700&family=Shadows+Into+Light&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.css" />
</head>
<body>
<div id="root"></div>
<script async src="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key={{ API_KEY }}></div>
<script src="./index.tsx"></script>
</body>
</html>
Putting this in your html doesnt work since the {{API_KEY}} is I assume from your framework. Since the html code is not compiled using your framework, it doesnt do anything with the <div hidden id="snipcart" data-api-key={{ API_KEY }}> tag.
To make this work, put your api key instead of the {{API_KEY}} variable.
Cheers,
Lea from Snipcart

Drop Down Menu Click

Should be an easy question...
My NAV Bar Template (working): https://codepen.io/ScottFSchmidt/pen/GMzgKz
...imported into my Portfolio (is NOT working): https://scottschmidtportfolio.000webhostapp.com/# The menu is not going down on click(the menu appears when the screen is smaller).
What is causing this? I have a feeling it is something within my scripts (below):
EDIT NEW UPDATED SCRIPTS from https://www.bootstrapcdn.com/:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>SS Studio</title>
<meta charset = "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"></script>
<script src="https://use.fontawesome.com/fab417e5fd.js"></script>
<script language="javascript">
Check the console:
Make sure Bootstrap loaded correctly. It look like you are trying to add bootstrap in three places.
Better to use CDNetworks. Here is the link for bootstrap cdn
Also you had one script error:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
// }); // remove this
Caution:
You're using HTTPS but some resources are requested in an insecure way. use https:// for including all the resources like images, css, js, etc

Bootstrap popover only works on hover

I have been having a hard time getting Bootstraps popover's to show on click and not on hover. I looked at the example on this page.
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h
I have copied over the exact script src links from the example as well as the meta and link lines. I also initialize the popover to no avail. Here is a simplified version of what I'm working with.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type ="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<div id="container">
Toggle popover
</div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
I don't know if this is a normal thing to do or not but i tried opening up the page, right clicking the a element and clicking inspect(in chrome.) In the bottom right it shows me two errors.
Uncaught Error: Bootstrap's JavaScript requires jQuery
Uncaught TypeError: $(...).popover is not a function
It cant find JQuery? Its certainly there. The element shows and the text reads when I hover over it and nothing happens when I click it.
Include the jQuery script first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
This error is logged to the console on page load:
Uncaught Error: Bootstrap's JavaScript requires jQuery
Meaning the bootstrap js is looking for the jquery object.

Bootstrap Popover not displaying

Currently I have a popover set up that is not initialing. My code is as follows:
HTML:
<div data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>
JavaScript:
$(function () {
$('[data-toggle="popover"]').popover()
})
I've included everything I need to CSS and library wise and managed to replicate the issue here in a fiddle: https://jsfiddle.net/W3R3W0LF666/33rmse7m/
So far I've tried moved the initialization text to various places in the JS file to rule out any hierarchy issues
Initialize
$('[data-toggle="popover"]').popover()
Pop it
$('[data-toggle="popover"]').popover('show');
Check this one this will help you..
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link href="style.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body>
Toggle popover
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
I have updated your code, Check code below JSFiddle :
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'bottom'
});
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button data-toggle="popover" class="btn btn-primary" data-content="xyz">Click Me</button>
You forgot to load the external resources.
From the docs:
How popover is triggered - click | hover | focus | manual. You may
pass multiple triggers; separate them with a space. manual cannot be
combined with any other trigger.
You need to define the trigger data-trigger="hover":
<div data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>
Have a look at this fiddle.
PS: Yours actually works, but it only triggers on-click.
Just wrapped your jQuery script like this:
jQuery(function ($) {
$('[data-toggle="popover"]').popover();
});
Or if you want to load the script on document ready, then use this:
jQuery(document).ready(function($){
$('[data-toggle="popover"]').popover();
});
Reason: $ causes name-conflict between jQuery and plain-js/other-libraries hence why you have to call it differently so the browser knows that jQuery and not some other library is using it.
Here's a jsfiddle with above codes: https://jsfiddle.net/AndrewL32/33rmse7m/7/

twitter bootstrap - JS not working

this is probably really stupid question.
I love boostrap and using it CSS styling for pretty long time, how ever when i try to use any of their JS things it's not working for me.
I always make sure I have this in my tag but still
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
It looks i am completly blind or i don't know what I am always doing wrong. Is there a chance somebody can help me with that?
Thanks.
Example code:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Audatex History</title>
<!-- 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>
</head>
<body>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</body>
</html>
You are missing JQuery
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Note: Include it before the bootstrap JS.
And you must initialize
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
Note: Include it before the end tag head.
Bootstrap relies on jQuery. Include it before you include the bootstrap JS.

Categories