bootstrap tour no working
Jsfiddle Demo
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap-tour.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<br/>
<div class="container">
<button class="btn" id="tour-go">Start the tour!</button>
<br/>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default" id="my-element">
<div class="panel-heading">
<h3 class="panel-title">Panel title 1</h3>
</div>
<div class="panel-body">
Panel content 1
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default" id="my-other-element">
<div class="panel-heading">
<h3 class="panel-title">Panel title 2</h3>
</div>
<div class="panel-body">
Panel content 2
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title 3</h3>
</div>
<div class="panel-body">
Panel content 3
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="bootstrap-tour.js"></script>
<script>
// Instance the tour
var tour = new Tour({
steps: [
{
element: "#my-element",
title: "Title of my step",
content: "Content of my step"
},
{
element: "#my-other-element",
title: "Title of my step",
content: "Content of my step"
}
]});
// Initialize the tour
tour.init();
$('#tour-go').click(function () {
// Start the tour
tour.start();
});
</script>
</body>
</html>
</pre>
Use, it is a cookie based tour, to start it forcefully pass true in .start()
tour.start(true) // Pass true to force the start.
Fiddle
Related
I wrote this code but the "JS" part doesn't work. I tried downloading the JS files into a folder and properly call it, this example below should be "universal" cause I'm calling the "cdn" but somehow the section "collapse" is not responding. I have several problems in the rest of the code like the hamburger menu in mobile version also is not expanding. It's obviously that the script have the problem but I can't figure that out yet.
In this example minimized I'm showing you how I managed to insert bootstrap
I'm seriously worried right now. Any ideas or suggestions?
<!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.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container col-12 mt-5">
<div class="accordion w-100" id="basicAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-mdb-toggle="collapse"
data-mdb-target="#basicAccordionCollapseOne" aria-expanded="false"
aria-controls="collapseOne">
¿En cuanto tiempo voy a poder ver cambios?
</button>
</h2>
<div id="basicAccordionCollapseOne" class="accordion-collapse collapse"
aria-labelledby="headingOne" data-mdb-parent="#basicAccordion">
<div class="accordion-body">
Lorem ipsum dolor sit
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
Sorry for my english
You were just implementing the accordions incorrectly. I swapped out your accordion with the example from Bootstrap's documentation, and it's working just fine now.
You are using data-mdb-target on your accordion button when you should be using data-bs-target. data-mdb-parent should be data-bs-parent as well. If you change those or just use the below snippet, the issue will be fixed.
<!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.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container col-12 mt-5">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
¿En cuanto tiempo voy a poder ver cambios?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Lorem ipsum dolor sit
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
</body>
</html>
Try this bro its working
<!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">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container col-12 mt-5">
<div class="accordion w-100" id="basicAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
I'm trying to implement simple http service in AngularJS by fetching data from an api in json format. its a blog post and i am trying to show it in my blog. The data is received in my console but is not displaying in my blog. Please help. It uses Bootstrap in the front end. Here is a screenshot.
http://imgur.com/a/8p24h
var a = angular.module('Blog', []);
a.controller('BlogControl', function($http) {
var b = this;
this.heading = 'My Angular Blog';
this.subheading = 'Made by Anurag';
this.baseurl = 'https://projectsapi.edwisor.com/api/blogs/';
$http({
method: "GET",
url: this.baseurl + "all"
})
.then(function Success(response) {
console.log(response);
this.bpost = response.data.data;
});
})
<!DOCTYPE html>
<html ng-app="Blog">
<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="">
<meta name="author" content="">
<title>My Angular Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-controller="BlogControl as newBlog">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>{{newBlog.heading}}</h1>
<hr class="small">
<span class="subheading">{{newBlog.subheading}}</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-preview" ng-repeat="bl in newBlog.bpost">
{{bl.bodyHtml}}
</div>
<hr>
<!-- Pager -->
<ul class="pager">
<li class="next">
Older Posts →
</li>
</ul>
</div>
</div>
</div>
<hr>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
<!-- Important JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="angular/app.js" type="text/javascript"></script>
</body>
</html>
this is not the instance of the controller inside the callback. Try to capture it outside and then assign bpost on the captured instance:
var that = this;
$http({
method: "GET",
url: this.baseurl + "all"
})
.then(function Success(response) {
console.log(response);
that.bpost = response.data.data;
});
try this npm module anngularjs-requester--http
I have a layout with 3 columns in divs: cMenu, cList and cContent.
In menu, I use this:
<script>
$(document).ready( function() {
$("#mMateriasPrimas").on("click", function() {
$("#cLista").load("materias_primas_lista.php");
});
});
</script>
<div class="menu_wrapper">
<div class="menu_item">
Matérias primas
</div>
<div class="menu_hover">
</div>
<!-- other menu itens following here -->
</div>
And this is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/style.css" rel="stylesheet">
<link href="css/typo.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<?php require 'includes/connect_link.php' ; ?>
<div class="wrapper">
<div class="header">
<strong>TOP</strong>
</div><!-- .header-->
<div class="middle">
<div class="container">
<main class="content">
<strong>MAIN</strong>
</main><!-- .content -->
</div><!-- .container-->
<div class="left-sidebar" id="cMenu">
<?php require '_menu.php'; ?>
</div><!-- .left-sidebar -->
<div class="right-sidebar" id="cLista">
<?php // require 'materias_primas_lista.php'; ?>
</div><!-- .right-sidebar -->
</div><!-- .middle-->
</div><!-- .wrapper -->
<div class="footer">
<strong>Footer</strong>
</div><!-- .footer -->
</body>
</html>
When I click on my link, the cList div receives the correct file and reload the whole page.
Can someone help me, please?
The default action when you click a link is to load the href. You can prevent it by calling event.preventDefault().
$("#mMateriasPrimas").on("click", function(event) {
event.preventDefault();
$("#cLista").load("materias_primas_lista.php");
});
I'm trying to connect a controller to my view and I keep getting this error:
Error: ng:areq Bad Argument Argument 'TestAppCtrl' is not a function,
got undefined
I have this view:
<!DOCTYPE html>
<html ng-app lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Resume Page</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- ExtraCSS -->
<link rel="stylesheet" href="css/extra.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<!-- External JS extras -->
<script src="js/script.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="app">
<div class="container">
<div class="row">
<h3>Resume</h3>
</div>
<div ng-controller="TestAppCtrl" id="TestAppCtrl">
{{data}}
</div>
<div class="row">
<div class="col-sm-6 col-xs-12 span4">
<h4>About</h4>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Technical</li>
<li role="presentation">School</li>
<li role="presentation">Experience</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="technical">
</div>
<div role="tabpanel" class="tab-pane" id="school">
.t..
</div>
<div role="tabpanel" class="tab-pane" id="experience">
.z..
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<h4>Contact Info</h4>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And this controller:
// Generated by CoffeeScript 1.9.3
var app;
app = angular.module('app', []);
console.log("hello world");
app.controller('TestAppCtrl', ['$scope', function($scope) {
$scope.data = [1, 2, 3, 4, 5];
}]);
I know it's finding the correct controller because the console log prints. But the data in the controller isn't binding in the view it's just showing as {{data}} any suggestions would help a lot, thank you.
You have ng-app twice
<!DOCTYPE html>
<html ng-app lang="en">
...
</head>
<body ng-app="app">
Angular will use the first one on the page, your initialization statement is referencing the 2nd ng-app
app = angular.module('app', []);
It's my first day actually experimenting with AngularJS and I'm hitting an error.
Error: $injector:modulerr Module Error
Error Link
The AngularJS code :
var PP = angular.module('PP', []);
PP.controller('documentController', function ($scope) {
$scope.documents = [
{
'filename': 'Untitled-1',
'content': 'Content-1'
},
{
'filename': 'Untitled-2',
'content': 'Content-2'
},
{
'filename': 'Untitled-3',
'content': 'Content-3'
},
];
});
And the HTML:
<!DOCTYPE html>
<html lang="en" ng-app="PP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Core Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery.layout.min.css" rel="stylesheet">
<link href="custom/style.css" rel="stylesheet">
<!-- IE Support -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Main Wrapper -->
<div class="container-fluid ui-layout-center" id="wrapper" ng-controller="documentController">
<!-- Editor Tabs -->
<div class="row-fluid">
<ul class="nav nav-tabs" role="tablist" id="tabbar">
<li ng-repeat="document in documents">
<a href="#{{document.filename}}" role="tab" data-toggle="tab">
<button class="close closeTab" type="button">x</button>
{{document.filename}}
</a>
</li>
</ul>
</div>
<!-- Editor Contents -->
<div class="row-fluid content">
<div class="tab-content" style="height:100%;">
<div ng-repeat="document in documents">
<div class="tab-pane" id="{{document.filename}}">{{document.content}}</div>
</div>
</div>
</div>
<!-- Panel Tabs -->
<ul class="nav nav-tabs panel-tabs" role="tablist">
<li id="console-trigger"><i class="glyphicon glyphicon-flash"></i></li>
<li id="search-trigger"><i class="glyphicon glyphicon-search"></i></li>
</ul>
</div>
<!-- Panel Contents -->
<div class="ui-layout-south">
<div class="tab-content" id="panel-content">
<!-- Console -->
<div class="tab-pane fade in active" id="console-tab">
</div>
<!-- Search -->
<div class="tab-pane fade" id="search-tab">
</div>
</div>
</div>
<!-- Scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.layout.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.tabdrop.min.js"></script>
<script src="js/mustache.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="extras/ace/ace.js"></script>
<script src="custom/script.js"></script>
</body>
</html>
Any idea what is going on?